@iobroker/gui-components 10.2.0 → 10.2.2

package/build/Components/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"./src/","sources":["Components/ColorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAsB,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAiB,MAAM,aAAa,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,MAAM,MAAM,GAAwB;IAChC,KAAK,EAAE;QACH,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,CAAC;KAClB;IACD,SAAS,EAAE;QACP,SAAS,EAAE,EAAE;KAChB;IACD,MAAM,EAAE;QACJ,EAAE,EAAE,MAAM;QACV,CAAC,EAAE,KAAK;QACR,eAAe,EAAE,kBAAkB;QACnC,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,0BAA0B;QACrC,OAAO,EAAE,cAAc;QACvB,MAAM,EAAE,SAAS;QACjB,aAAa,EAAE,QAAQ;KAC1B;IACD,cAAc,EAAE;QACZ,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,SAAS;KACpB;IACD,OAAO,EAAE;QACL,kBAAkB,EAAE;YAChB,SAAS,EAAE,OAAO;YAClB,eAAe,EAAE,WAAW;YAC5B,SAAS,EAAE,MAAM;SACpB;KACJ;IACD,WAAW,EAAE;QACT,OAAO,EAAE,CAAC;KACb;IACD,WAAW,EAAE,CAAC,KAAe,EAAE,EAAE,CAAC,CAAC;QAC/B,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,aAAa;QAC/D,YAAY,EAAE,aAAa;QAC3B,SAAS,EAAE;YACP,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,aAAa;SAChE;KACJ,CAAC;IACF,KAAK,EAAE;QACH,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;KACV;IACD,SAAS,EAAE;QACP,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,CAAC;KACR;IACD,MAAM,EAAE,CAAC,KAAe,EAAE,EAAE,CAAC,CAAC;QAC1B,UAAU,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,aAAa;KAC7D,CAAC;IACF,UAAU,EAAE;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACb;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,EAAE;KAChB;CACJ,CAAC;AAgCF;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,SAA6C;IAC1E;;;;OAIG;IACH,YAAY,KAAuB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,kBAAkB,EAAE,KAAK;YACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE;YACjD,QAAQ,EAAE,IAAI;SACjB,CAAC;IACN,CAAC;IAEO,WAAW,GAAG,CAAC,CAAmC,EAAQ,EAAE;QAChE,IAAI,CAAC,QAAQ,CAAC;YACV,kBAAkB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB;YAClD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa;SACnE,CAAC,CAAC;IACP,CAAC,CAAC;IAEM,WAAW,GAAG,GAAS,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC,EAAE,kBAAkB,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IACjE,CAAC,CAAC;IAEF;;;;;;OAMG;IACH,MAAM,CAAC,QAAQ,CAAC,KAA4C,EAAE,KAAe;QACzE,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACrC,MAAM,MAAM,GAAG,KAA0B,CAAC;YAC1C,IAAI,MAAM,CAAC,GAAG,EAAE,CAAC;gBACb,IAAI,KAAK,EAAE,CAAC;oBACR,OAAO,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;gBACtJ,CAAC;gBACD,OAAO,QAAQ,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;YACnF,CAAC;YACD,MAAM,MAAM,GAAG,KAAiB,CAAC;YACjC,IAAI,KAAK,EAAE,CAAC;gBACR,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;YAC1I,CAAC;YACD,OAAO,QAAQ,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC;QACnE,CAAC;QACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,OAAO,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QAClE,CAAC;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,OAAO,CAAC,GAAW;QACtB,MAAM,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,sEAAsE,CAAC,CAAC;QAE5F,IAAI,CAAC,EAAE,CAAC;YACJ,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC3D,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC3D,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAE3D,OAAO,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;QACnD,CAAC;QACD,OAAO,GAAG,CAAC;IACf,CAAC;IAEO,YAAY,GAAG,CAAC,KAAwB,EAAQ,EAAE;QACtD,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC5G,CAAC,CAAC;IAEF;;;;;OAKG;IACH,kBAAkB,CAAC,UAA4B,EAAE,SAA2B;QACxE,MAAM,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QAE/E,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,EAAE,CAAC;YAC5B,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC;IAED,mBAAmB;QACf,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAC3D,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACnC,oBAAC,MAAM,IACH,KAAK,EAAE,MAAM,CAAC,MAAM,EACpB,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE;gBACV,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;gBACzB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;YAC9C,CAAC;YAED,6BAAK,KAAK,EAAE,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,GAAI,CACtD,CACZ,CAAC,CACA,CACT,CAAC;IACN,CAAC;IAED,MAAM;QACF,MAAM,KAAK,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;QAC9C,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAC5B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE7B,OAAO,CACH,oBAAC,GAAG,IACA,SAAS,EAAC,KAAK,EACf,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,SAAS,EAC9B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE;YAEpC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,oBAAC,SAAS,IACN,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAC,UAAU,EAClB,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAC1C,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,MAAM,EAAC,OAAO,EACd,EAAE,EAAE;oBACA,uBAAuB,EAAE,MAAM,CAAC,SAAS;oBACzC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB;oBACxD,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;iBAC5B,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAClD,CACL;YACA,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,CACjC,oBAAC,UAAU,IACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EACpC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBAEzE,oBAAC,UAAU,OAAG,CACL,CAChB,CAAC,CAAC,CAAC,IAAI;YACR,oBAAC,GAAG,IACA,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACzD,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAChC,EAAE,EAAE;oBACA,GAAG,MAAM,CAAC,MAAM;oBAChB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;oBAC5D,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa;oBAC7C,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB;oBAC7C,SAAS,EAAE,YAAY;oBACvB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;iBAC/F;gBAED,6BACI,KAAK,EAAE;wBACH,GAAG,MAAM,CAAC,KAAK;wBACf,UAAU,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;wBACvC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE;qBACzF,GACH,CACA;YACL,IAAI,CAAC,KAAK,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACrD,oBAAC,IAAI,IACD,EAAE,EAAE;oBACA,GAAG,MAAM,CAAC,OAAO;oBACjB,iBAAiB,EAAE,MAAM,CAAC,WAAW;iBACxC,EACD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,IAAI,EAAE,CAAC,CAAC,EACR,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;gBAEjC,oBAAC,YAAY,IACT,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,EACpC,gBAAgB,EAAE,CAAC,MAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,EAC9E,MAAM,EAAE;wBACJ,OAAO,EAAE;4BACL,MAAM,EAAE;gCACJ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,MAAM;6BACxE;yBACJ;qBACJ,GACH;gBACD,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAChC,oBAAC,UAAU,IACP,EAAE,EAAE,MAAM,CAAC,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;oBAEpC,oBAAC,UAAU,OAAG,CACL,CAChB,CAAC,CAAC,CAAC,IAAI;gBACR,oBAAC,UAAU,IACP,EAAE,EAAE,MAAM,CAAC,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAEjC,oBAAC,SAAS,OAAG,CACJ;gBACZ,IAAI,CAAC,mBAAmB,EAAE,CACxB,CACV,CAAC,CAAC,CAAC,IAAI,CACN,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["/**\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { Component, type CSSProperties } from 'react';\nimport { ChromePicker, type RGBColor } from 'react-color';\n\nimport { TextField, Menu, IconButton, Button, Box } from '@mui/material';\n\nimport { Delete as IconDelete, Close as IconClose } from '@mui/icons-material';\n\nimport { I18n } from '../i18n';\n\nimport type { IobTheme } from '../types';\n\nconst styles: Record<string, any> = {\n    color: {\n        width: 36,\n        height: 14,\n        borderRadius: 2,\n    },\n    delButton: {\n        marginTop: 16,\n    },\n    swatch: {\n        mt: '16px',\n        p: '5px',\n        backgroundColor: 'background.paper',\n        borderRadius: '1px',\n        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n        display: 'inline-block',\n        cursor: 'pointer',\n        verticalAlign: 'middle',\n    },\n    swatchDisabled: {\n        opacity: 0.5,\n        cursor: 'default',\n    },\n    popover: {\n        '& .MuiPaper-root': {\n            textAlign: 'right',\n            backgroundColor: '#00000000',\n            boxShadow: 'none',\n        },\n    },\n    popoverList: {\n        padding: 0,\n    },\n    closeButton: (theme: IobTheme) => ({\n        backgroundColor: `${theme.palette.background.paper} !important`,\n        borderRadius: '0 0 25% 25%',\n        '&:hover': {\n            backgroundColor: `${theme.palette.secondary.main} !important`,\n        },\n    }),\n    cover: {\n        position: 'fixed',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n    },\n    textDense: {\n        mt: 0,\n        mb: 0,\n    },\n    picker: (theme: IobTheme) => ({\n        background: `${theme.palette.background.paper} !important`,\n    }),\n    iconButton: {\n        width: 16,\n        height: 16,\n    },\n    button: {\n        width: 32,\n        height: 32,\n        minWidth: 32,\n        minHeight: 32,\n    },\n};\n\ninterface ColorPickerProps {\n    /** Set to true to disable the color picker. */\n    disabled?: boolean;\n    /** The currently selected color. */\n    value?: string;\n    /** @deprecated The currently selected color use value */\n    color?: string;\n    /** The color change callback. */\n    onChange: (rgba: string) => void;\n    /** Label of the color picker. */\n    label?: string;\n    /** @deprecated TLabel of the color picker use label */\n    name?: string;\n    /** Additional styling for this component. */\n    style?: CSSProperties;\n    /** The CSS class name. */\n    className?: string;\n    customPalette?: string[];\n    noInputField?: boolean;\n    barWidth?: number;\n    sx?: Record<string, any>;\n    theme?: IobTheme;\n}\n\ninterface ColorPickerState {\n    displayColorPicker: boolean;\n    color: string | RGBColor;\n    anchorEl: HTMLDivElement | null;\n}\n\n/**\n * A color picker component.\n */\nexport class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {\n    /**\n     * Constructor for the color picker.\n     *\n     * @param props The properties.\n     */\n    constructor(props: ColorPickerProps) {\n        super(props);\n        this.state = {\n            displayColorPicker: false,\n            color: this.props.value || this.props.color || '',\n            anchorEl: null,\n        };\n    }\n\n    private handleClick = (e: React.MouseEvent<HTMLDivElement>): void => {\n        this.setState({\n            displayColorPicker: !this.state.displayColorPicker,\n            anchorEl: this.state.displayColorPicker ? null : e.currentTarget,\n        });\n    };\n\n    private handleClose = (): void => {\n        this.setState({ displayColorPicker: false, anchorEl: null });\n    };\n\n    /**\n     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.\n     *\n     * @param color The color to convert.\n     * @param isHex If true, the color will be converted to hex format.\n     * @returns the hex or rgba representation of the given color.\n     */\n    static getColor(color: string | { rgb: RGBColor } | RGBColor, isHex?: boolean): string {\n        if (color && typeof color === 'object') {\n            const oColor = color as { rgb: RGBColor };\n            if (oColor.rgb) {\n                if (isHex) {\n                    return `#${oColor.rgb.r.toString(16).padStart(2, '0')}${oColor.rgb.g.toString(16).padStart(2, '0')}${oColor.rgb.b.toString(16).padStart(2, '0')}`;\n                }\n                return `rgba(${oColor.rgb.r},${oColor.rgb.g},${oColor.rgb.b},${oColor.rgb.a})`;\n            }\n            const rColor = color as RGBColor;\n            if (isHex) {\n                return `#${rColor.r.toString(16).padStart(2, '0')}${rColor.g.toString(16).padStart(2, '0')}${rColor.b.toString(16).padStart(2, '0')}`;\n            }\n            return `rgba(${rColor.r},${rColor.g},${rColor.b},${rColor.a})`;\n        }\n        if (typeof color === 'string') {\n            return isHex ? ColorPicker.rgb2hex(color || '') : color || '';\n        }\n        return '';\n    }\n\n    /**\n     * Convert rgb() or rgba() format to hex format #rrggbb.\n     *\n     * @param rgb The color in rgb() or rgba() format. if not in this format, the color will be returned as is.\n     */\n    static rgb2hex(rgb: string): string {\n        const m = rgb.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i);\n\n        if (m) {\n            const r = parseInt(m[1], 10).toString(16).padStart(2, '0');\n            const g = parseInt(m[2], 10).toString(16).padStart(2, '0');\n            const b = parseInt(m[3], 10).toString(16).padStart(2, '0');\n\n            return m?.length === 4 ? `#${r}${g}${b}` : rgb;\n        }\n        return rgb;\n    }\n\n    private handleChange = (color: string | RGBColor): void => {\n        this.setState({ color }, () => this.props.onChange && this.props.onChange(ColorPicker.getColor(color)));\n    };\n\n    /**\n     * If the props are updated from outside, they should override the state\n     *\n     * @param _prevProps The previous properties.\n     * @param prevState The previous state.\n     */\n    componentDidUpdate(_prevProps: ColorPickerProps, prevState: ColorPickerState): void {\n        const color = ColorPicker.getColor(this.props.color || this.props.value || '');\n\n        if (color !== prevState.color) {\n            this.setState({ color });\n        }\n    }\n\n    renderCustomPalette(): React.JSX.Element | null {\n        if (!this.props.customPalette) {\n            return null;\n        }\n        return (\n            <div style={{ width: '100%', display: 'flex', flexWrap: 'wrap' }}>\n                {this.props.customPalette.map(color => (\n                    <Button\n                        style={styles.button}\n                        key={color}\n                        onClick={() => {\n                            this.handleChange(color);\n                            setTimeout(() => this.handleClose(), 300);\n                        }}\n                    >\n                        <div style={{ ...styles.iconButton, background: color }} />\n                    </Button>\n                ))}\n            </div>\n        );\n    }\n\n    render(): React.JSX.Element {\n        const style = { ...(this.props.style || {}) };\n        style.position = 'relative';\n        const { color } = this.state;\n\n        return (\n            <Box\n                component=\"div\"\n                style={style}\n                sx={this.props.sx || undefined}\n                className={this.props.className || ''}\n            >\n                {this.props.noInputField ? null : (\n                    <TextField\n                        disabled={this.props.disabled}\n                        variant=\"standard\"\n                        id=\"ar_color_picker_name\"\n                        label={this.props.label || this.props.name}\n                        value={color || ''}\n                        margin=\"dense\"\n                        sx={{\n                            '&.MuiFormControl-root': styles.textDense,\n                            width: color ? 'calc(100% - 80px)' : 'calc(100% - 56px)',\n                            mr: color ? undefined : 1,\n                        }}\n                        onChange={e => this.handleChange(e.target.value)}\n                    />\n                )}\n                {!this.props.noInputField && color ? (\n                    <IconButton\n                        disabled={this.props.disabled}\n                        onClick={() => this.handleChange('')}\n                        size=\"small\"\n                        style={this.props.label || this.props.name ? styles.delButton : undefined}\n                    >\n                        <IconDelete />\n                    </IconButton>\n                ) : null}\n                <Box\n                    component=\"div\"\n                    onClick={e => !this.props.disabled && this.handleClick(e)}\n                    title={I18n.t('ra_Select color')}\n                    sx={{\n                        ...styles.swatch,\n                        ...(this.props.disabled ? styles.swatchDisabled : undefined),\n                        background: color ? undefined : 'transparent',\n                        border: color ? undefined : '1px dashed #ccc',\n                        boxSizing: 'border-box',\n                        marginTop: this.props.noInputField || !(this.props.label || this.props.name) ? 0 : undefined,\n                    }}\n                >\n                    <div\n                        style={{\n                            ...styles.color,\n                            background: ColorPicker.getColor(color),\n                            width: this.props.noInputField ? this.props.barWidth || 16 : this.props.barWidth || 36,\n                        }}\n                    />\n                </Box>\n                {this.state.displayColorPicker && !this.props.disabled ? (\n                    <Menu\n                        sx={{\n                            ...styles.popover,\n                            '&. MuiMenu-list': styles.popoverList,\n                        }}\n                        anchorEl={this.state.anchorEl}\n                        open={!0}\n                        onClose={() => this.handleClose()}\n                    >\n                        <ChromePicker\n                            color={this.state.color || undefined}\n                            onChangeComplete={(_color: { rgb: RGBColor }) => this.handleChange(_color.rgb)}\n                            styles={{\n                                default: {\n                                    picker: {\n                                        backgroundColor: this.props.theme?.palette.background.paper || '#888',\n                                    },\n                                },\n                            }}\n                        />\n                        {color && this.props.noInputField ? (\n                            <IconButton\n                                sx={styles.closeButton}\n                                onClick={() => this.handleChange('')}\n                            >\n                                <IconDelete />\n                            </IconButton>\n                        ) : null}\n                        <IconButton\n                            sx={styles.closeButton}\n                            onClick={() => this.handleClose()}\n                        >\n                            <IconClose />\n                        </IconButton>\n                        {this.renderCustomPalette()}\n                    </Menu>\n                ) : null}\n            </Box>\n        );\n    }\n}\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"./src/","sources":["Components/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2018-2026 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { Component, type CSSProperties } from 'react';\nimport { RgbaColorPicker, RgbColorPicker, type RgbaColor } from 'react-colorful';\n\nimport { TextField, Popover, IconButton, Button, Box, Tooltip, MenuItem, Select } from '@mui/material';\n\nimport { Delete as IconDelete, Colorize as IconColorize } from '@mui/icons-material';\n\nimport { I18n } from '../i18n';\n\nimport type { IobTheme } from '../types';\n\n/** Color in the `{ r, g, b, a }` notation. Kept for backwards compatibility with `react-color`. */\nexport interface RGBColor {\n    r: number;\n    g: number;\n    b: number;\n    a?: number;\n}\n\n/** Notation used for the value that is reported via `onChange`. */\nexport type ColorPickerFormat = 'hex' | 'rgb' | 'hsl';\n\nconst RECENT_COLORS_KEY = 'iob-color-picker-recent';\nconst MAX_RECENT_COLORS = 12;\n\n/** Small checkerboard, so a semi-transparent color is recognizable as such */\nconst ALPHA_BACKGROUND =\n    'linear-gradient(45deg, #c0c0c0 25%, transparent 25%), linear-gradient(-45deg, #c0c0c0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c0c0c0 75%), linear-gradient(-45deg, transparent 75%, #c0c0c0 75%)';\n\nconst ALPHA_BACKGROUND_SIZE = '8px 8px';\nconst ALPHA_BACKGROUND_POSITION = '0 0, 0 4px, 4px -4px, -4px 0px';\n\nconst styles: Record<string, any> = {\n    swatch: {\n        mt: '16px',\n        p: '4px',\n        backgroundColor: 'background.paper',\n        borderRadius: '6px',\n        boxShadow: '0 0 0 1px rgba(128,128,128,.35)',\n        display: 'inline-block',\n        cursor: 'pointer',\n        verticalAlign: 'middle',\n        transition: 'box-shadow 0.15s ease-in-out',\n        '&:hover': {\n            boxShadow: '0 0 0 2px rgba(128,128,128,.6)',\n        },\n    },\n    swatchDisabled: {\n        opacity: 0.5,\n        cursor: 'default',\n        '&:hover': {\n            boxShadow: '0 0 0 1px rgba(128,128,128,.35)',\n        },\n    },\n    color: {\n        height: 14,\n        borderRadius: '3px',\n        backgroundImage: ALPHA_BACKGROUND,\n        backgroundSize: ALPHA_BACKGROUND_SIZE,\n        backgroundPosition: ALPHA_BACKGROUND_POSITION,\n    },\n    delButton: {\n        marginTop: 16,\n    },\n    textDense: {\n        mt: 0,\n        mb: 0,\n    },\n    popover: {\n        '& .MuiPaper-root': {\n            borderRadius: '12px',\n        },\n    },\n    // The chrome around the react-colorful area\n    pickerWrapper: (theme: IobTheme) => ({\n        p: '12px',\n        backgroundColor: theme.palette.background.paper,\n        borderRadius: '12px',\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '10px',\n        // restyle react-colorful, so it fits into the ioBroker themes\n        '& .react-colorful': {\n            width: '100%',\n            height: 'auto',\n            gap: '10px',\n        },\n        '& .react-colorful__saturation': {\n            borderRadius: '8px',\n            border: 'none',\n            height: 150,\n            boxShadow: 'none',\n        },\n        '& .react-colorful__hue, & .react-colorful__alpha': {\n            height: 14,\n            borderRadius: '7px',\n        },\n        '& .react-colorful__alpha': {\n            backgroundImage: ALPHA_BACKGROUND,\n            backgroundSize: ALPHA_BACKGROUND_SIZE,\n            backgroundPosition: ALPHA_BACKGROUND_POSITION,\n        },\n        '& .react-colorful__last-control': {\n            borderRadius: '7px',\n        },\n        '& .react-colorful__pointer': {\n            width: 18,\n            height: 18,\n            borderWidth: 2,\n        },\n        '& .react-colorful__saturation-pointer': {\n            width: 20,\n            height: 20,\n        },\n    }),\n    controlRow: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: '6px',\n    },\n    preview: {\n        width: 28,\n        height: 28,\n        flexShrink: 0,\n        borderRadius: '6px',\n        boxShadow: '0 0 0 1px rgba(128,128,128,.35) inset',\n        backgroundImage: ALPHA_BACKGROUND,\n        backgroundSize: ALPHA_BACKGROUND_SIZE,\n        backgroundPosition: ALPHA_BACKGROUND_POSITION,\n    },\n    valueInput: {\n        flexGrow: 1,\n        minWidth: 60,\n        '& .MuiInputBase-input': {\n            fontFamily: 'monospace',\n            fontSize: '0.75rem',\n            textOverflow: 'ellipsis',\n        },\n    },\n    formatSelect: {\n        flexShrink: 0,\n        fontSize: '0.7rem',\n        opacity: 0.75,\n        '& .MuiSelect-select': {\n            py: '4px',\n            pl: '2px',\n            pr: '18px !important',\n        },\n        '& .MuiSelect-icon': {\n            right: 0,\n        },\n    },\n    sectionTitle: {\n        fontSize: '0.7rem',\n        opacity: 0.6,\n        textTransform: 'uppercase',\n        letterSpacing: '0.06em',\n    },\n    swatchRow: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: '4px',\n        mt: '4px',\n    },\n    paletteItem: {\n        width: 22,\n        height: 22,\n        p: 0,\n        minWidth: 22,\n        borderRadius: '5px',\n        boxShadow: '0 0 0 1px rgba(128,128,128,.35) inset',\n        backgroundImage: ALPHA_BACKGROUND,\n        backgroundSize: ALPHA_BACKGROUND_SIZE,\n        backgroundPosition: ALPHA_BACKGROUND_POSITION,\n        '&:hover': {\n            boxShadow: '0 0 0 2px rgba(128,128,128,.7) inset',\n        },\n    },\n    fill: {\n        width: '100%',\n        height: '100%',\n        borderRadius: 'inherit',\n    },\n};\n\nconst DEFAULT_COLOR: RgbaColor = { r: 0, g: 0, b: 0, a: 1 };\n\nlet canvasContext: CanvasRenderingContext2D | null | undefined;\n\n/**\n * Normalize any CSS color notation (color names, `color()`, ...) with the help of a canvas.\n *\n * @param color The color string to normalize.\n * @returns the normalized color as `#rrggbb`/`rgba(...)` string or null if the string is no valid color.\n */\nfunction normalizeCssColor(color: string): string | null {\n    if (canvasContext === undefined) {\n        canvasContext = typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d');\n    }\n    if (!canvasContext) {\n        return null;\n    }\n    // `fillStyle` keeps its previous value if the assigned string is no valid color,\n    // so it must be probed with two different defaults\n    canvasContext.fillStyle = '#000000';\n    canvasContext.fillStyle = color;\n    const first = canvasContext.fillStyle;\n    canvasContext.fillStyle = '#ffffff';\n    canvasContext.fillStyle = color;\n\n    return first === canvasContext.fillStyle ? first : null;\n}\n\n/**\n * Convert h, s, l (0..1) to r, g, b (0..255).\n *\n * @param h The hue in the range 0..1.\n * @param s The saturation in the range 0..1.\n * @param l The lightness in the range 0..1.\n */\nfunction hsl2rgb(h: number, s: number, l: number): { r: number; g: number; b: number } {\n    if (!s) {\n        const v = Math.round(l * 255);\n        return { r: v, g: v, b: v };\n    }\n\n    const hue2rgb = (p: number, q: number, t: number): number => {\n        let _t = t;\n        if (_t < 0) {\n            _t += 1;\n        }\n        if (_t > 1) {\n            _t -= 1;\n        }\n        if (_t < 1 / 6) {\n            return p + (q - p) * 6 * _t;\n        }\n        if (_t < 1 / 2) {\n            return q;\n        }\n        if (_t < 2 / 3) {\n            return p + (q - p) * (2 / 3 - _t) * 6;\n        }\n        return p;\n    };\n\n    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n    const p = 2 * l - q;\n\n    return {\n        r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),\n        g: Math.round(hue2rgb(p, q, h) * 255),\n        b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255),\n    };\n}\n\n/**\n * Convert r, g, b (0..255) to h (0..360), s, l (0..100).\n *\n * @param color The color to convert.\n */\nfunction rgb2hsl(color: RgbaColor): { h: number; s: number; l: number } {\n    const r = color.r / 255;\n    const g = color.g / 255;\n    const b = color.b / 255;\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    const l = (max + min) / 2;\n\n    if (max === min) {\n        return { h: 0, s: 0, l: Math.round(l * 100) };\n    }\n    const d = max - min;\n    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    let h: number;\n    if (max === r) {\n        h = (g - b) / d + (g < b ? 6 : 0);\n    } else if (max === g) {\n        h = (b - r) / d + 2;\n    } else {\n        h = (r - g) / d + 4;\n    }\n\n    return { h: Math.round((h / 6) * 360), s: Math.round(s * 100), l: Math.round(l * 100) };\n}\n\n/**\n * Clamp a number into the given range.\n *\n * @param value The value to clamp.\n * @param min The lower limit.\n * @param max The upper limit.\n */\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Read a color channel that may be given as `128` or as `50%`.\n *\n * @param value The channel as string.\n * @param max The maximal value of this channel.\n */\nfunction readChannel(value: string, max: number): number {\n    const trimmed = value.trim();\n    const parsed = parseFloat(trimmed);\n    if (Number.isNaN(parsed)) {\n        return 0;\n    }\n    return clamp(Math.round(trimmed.endsWith('%') ? (parsed / 100) * max : parsed), 0, max);\n}\n\n/**\n * Read the alpha channel that may be given as `0.5` or as `50%`.\n *\n * @param value The alpha channel as string or undefined if it is not given.\n */\nfunction readAlpha(value: string | undefined): number {\n    if (value === undefined || value === '') {\n        return 1;\n    }\n    const trimmed = value.trim();\n    const parsed = trimmed.endsWith('%') ? parseFloat(trimmed) / 100 : parseFloat(trimmed);\n\n    return Number.isNaN(parsed) ? 1 : clamp(parsed, 0, 1);\n}\n\n/**\n * Parse any CSS color notation into `{ r, g, b, a }`.\n *\n * Supported are `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()`, `hsl()`, `hsla()` (comma or space\n * separated, with or without the `/ alpha` part) and every color name the browser knows.\n *\n * @param color The color string to parse.\n * @returns the parsed color or null if the string could not be interpreted.\n */\nexport function parseColor(color: string): RgbaColor | null {\n    if (!color || typeof color !== 'string') {\n        return null;\n    }\n    const str = color.trim().toLowerCase();\n    if (!str) {\n        return null;\n    }\n    if (str === 'transparent') {\n        return { r: 0, g: 0, b: 0, a: 0 };\n    }\n\n    const hex = /^#([\\da-f]{3,8})$/.exec(str);\n    if (hex) {\n        const h = hex[1];\n        if (h.length === 3 || h.length === 4) {\n            return {\n                r: parseInt(h[0] + h[0], 16),\n                g: parseInt(h[1] + h[1], 16),\n                b: parseInt(h[2] + h[2], 16),\n                a: h.length === 4 ? Math.round((parseInt(h[3] + h[3], 16) / 255) * 100) / 100 : 1,\n            };\n        }\n        if (h.length === 6 || h.length === 8) {\n            return {\n                r: parseInt(h.substring(0, 2), 16),\n                g: parseInt(h.substring(2, 4), 16),\n                b: parseInt(h.substring(4, 6), 16),\n                a: h.length === 8 ? Math.round((parseInt(h.substring(6, 8), 16) / 255) * 100) / 100 : 1,\n            };\n        }\n        return null;\n    }\n\n    const func = /^(rgba?|hsla?)\\(([^)]*)\\)$/.exec(str);\n    if (func) {\n        // both `1, 2, 3, 0.5` and `1 2 3 / 50%` are valid\n        const parts = func[2]\n            .replace('/', ',')\n            .split(/[\\s,]+/)\n            .filter(part => part !== '');\n\n        if (parts.length < 3) {\n            return null;\n        }\n        if (func[1].startsWith('rgb')) {\n            return {\n                r: readChannel(parts[0], 255),\n                g: readChannel(parts[1], 255),\n                b: readChannel(parts[2], 255),\n                a: readAlpha(parts[3]),\n            };\n        }\n        const hue = ((parseFloat(parts[0]) % 360) + 360) % 360;\n        const rgb = hsl2rgb(\n            hue / 360,\n            clamp(parseFloat(parts[1]) / 100, 0, 1),\n            clamp(parseFloat(parts[2]) / 100, 0, 1),\n        );\n\n        return { ...rgb, a: readAlpha(parts[3]) };\n    }\n\n    // color names and everything else the browser understands\n    const normalized = normalizeCssColor(str);\n\n    return normalized && normalized !== str ? parseColor(normalized) : null;\n}\n\n/**\n * Render `{ r, g, b, a }` in the requested notation.\n *\n * @param color The color to render.\n * @param format The desired notation.\n * @param noAlpha If true, the alpha channel is dropped.\n * @returns the color as CSS string.\n */\nexport function formatColor(color: RgbaColor, format: ColorPickerFormat, noAlpha?: boolean): string {\n    const alpha = noAlpha ? 1 : (color.a ?? 1);\n    const opaque = alpha >= 1;\n    const rounded = Math.round(alpha * 100) / 100;\n\n    if (format === 'hex') {\n        const hex = `#${color.r.toString(16).padStart(2, '0')}${color.g.toString(16).padStart(2, '0')}${color.b.toString(16).padStart(2, '0')}`;\n        const hexAlpha = Math.round(alpha * 255)\n            .toString(16)\n            .padStart(2, '0');\n\n        return opaque ? hex : `${hex}${hexAlpha}`;\n    }\n    if (format === 'hsl') {\n        const { h, s, l } = rgb2hsl(color);\n\n        return opaque ? `hsl(${h}, ${s}%, ${l}%)` : `hsla(${h}, ${s}%, ${l}%, ${rounded})`;\n    }\n\n    return opaque ? `rgb(${color.r}, ${color.g}, ${color.b})` : `rgba(${color.r}, ${color.g}, ${color.b}, ${rounded})`;\n}\n\n/**\n * Guess the notation of the given color string.\n *\n * @param color The color string.\n */\nfunction detectFormat(color: string): ColorPickerFormat | null {\n    const str = (color || '').trim().toLowerCase();\n    if (str.startsWith('#')) {\n        return 'hex';\n    }\n    if (str.startsWith('rgb')) {\n        return 'rgb';\n    }\n    if (str.startsWith('hsl')) {\n        return 'hsl';\n    }\n    return null;\n}\n\ninterface EyeDropperInstance {\n    open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>;\n}\n\n/**\n * Read the `EyeDropper` constructor, which is not part of the DOM types yet.\n */\nfunction getEyeDropper(): (new () => EyeDropperInstance) | undefined {\n    if (typeof window === 'undefined') {\n        return undefined;\n    }\n    return (window as unknown as Record<string, unknown>).EyeDropper as (new () => EyeDropperInstance) | undefined;\n}\n\ninterface ColorPickerProps {\n    /** Set to true to disable the color picker. */\n    disabled?: boolean;\n    /** The currently selected color. */\n    value?: string;\n    /** @deprecated The currently selected color use value */\n    color?: string;\n    /** The color change callback. */\n    onChange: (rgba: string) => void;\n    /** Label of the color picker. */\n    label?: string;\n    /** @deprecated TLabel of the color picker use label */\n    name?: string;\n    /** Additional styling for this component. */\n    style?: CSSProperties;\n    /** The CSS class name. */\n    className?: string;\n    /** Predefined colors that are offered below the picker. */\n    customPalette?: string[];\n    /** Do not show the text field with the color value, only the color bar. */\n    noInputField?: boolean;\n    /** Width of the color bar. */\n    barWidth?: number;\n    sx?: Record<string, any>;\n    /** @deprecated the theme is taken from the MUI context */\n    theme?: IobTheme;\n    /** Hide the alpha slider and always report a fully opaque color. */\n    noAlpha?: boolean;\n    /** Notation of the reported value. If not set, it is taken from the incoming value and defaults to `rgb`. */\n    format?: ColorPickerFormat;\n    /** Do not offer the recently used colors. */\n    noRecentColors?: boolean;\n    /** Width of the picker popup in pixels. Default 280. */\n    pickerWidth?: number;\n    /** ID of the text field. Must be set if more than one color picker is rendered at the same time. */\n    id?: string;\n}\n\ninterface ColorPickerState {\n    displayColorPicker: boolean;\n    /** The working color of the picker. Always valid, even if no color is selected. */\n    rgba: RgbaColor;\n    /** The text shown in the input field. An empty string means \"no color selected\". */\n    textValue: string;\n    format: ColorPickerFormat;\n    anchorEl: HTMLDivElement | null;\n    recentColors: string[];\n}\n\n/**\n * A color picker component with alpha channel, eye dropper and HEX/RGB/HSL notations.\n */\nexport class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {\n    /**\n     * Constructor for the color picker.\n     *\n     * @param props The properties.\n     */\n    constructor(props: ColorPickerProps) {\n        super(props);\n        const value = props.value || props.color || '';\n\n        this.state = {\n            displayColorPicker: false,\n            rgba: parseColor(value) || { ...DEFAULT_COLOR },\n            textValue: value,\n            format: props.format || detectFormat(value) || 'rgb',\n            anchorEl: null,\n            recentColors: [],\n        };\n    }\n\n    /**\n     * If the props are updated from outside, they should override the state\n     *\n     * @param prevProps The previous properties.\n     */\n    componentDidUpdate(prevProps: ColorPickerProps): void {\n        const prevValue = prevProps.value ?? prevProps.color ?? '';\n        const value = this.props.value ?? this.props.color ?? '';\n\n        // React only on real changes from outside. If the value equals what is shown, it is the own echo.\n        if (prevValue !== value && value !== this.state.textValue) {\n            this.setState({\n                rgba: parseColor(value) || { ...DEFAULT_COLOR },\n                textValue: value,\n                format: this.props.format || detectFormat(value) || this.state.format,\n            });\n        } else if (this.props.format && this.props.format !== prevProps.format) {\n            this.setState({ format: this.props.format });\n        }\n    }\n\n    /**\n     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.\n     *\n     * @param color The color to convert.\n     * @param isHex If true, the color will be converted to hex format.\n     * @returns the hex or rgba representation of the given color.\n     */\n    static getColor(color: string | { rgb: RGBColor } | RGBColor, isHex?: boolean): string {\n        if (color && typeof color === 'object') {\n            const oColor = color as { rgb: RGBColor };\n            const rColor: RGBColor = oColor.rgb ? oColor.rgb : (color as RGBColor);\n\n            if (isHex) {\n                return `#${rColor.r.toString(16).padStart(2, '0')}${rColor.g.toString(16).padStart(2, '0')}${rColor.b.toString(16).padStart(2, '0')}`;\n            }\n            return `rgba(${rColor.r},${rColor.g},${rColor.b},${rColor.a ?? 1})`;\n        }\n        if (typeof color === 'string') {\n            return isHex ? ColorPicker.rgb2hex(color || '') : color || '';\n        }\n        return '';\n    }\n\n    /**\n     * Convert rgb() or rgba() format to hex format #rrggbb.\n     *\n     * @param rgb The color in rgb() or rgba() format. if not in this format, the color will be returned as is.\n     */\n    static rgb2hex(rgb: string): string {\n        const m = /^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i.exec(rgb);\n\n        if (m) {\n            const r = parseInt(m[1], 10).toString(16).padStart(2, '0');\n            const g = parseInt(m[2], 10).toString(16).padStart(2, '0');\n            const b = parseInt(m[3], 10).toString(16).padStart(2, '0');\n\n            return m?.length === 4 ? `#${r}${g}${b}` : rgb;\n        }\n        return rgb;\n    }\n\n    /**\n     * Read the recently used colors from the local storage.\n     */\n    static readRecentColors(): string[] {\n        try {\n            const stored = window.localStorage.getItem(RECENT_COLORS_KEY);\n            const parsed: unknown = stored ? JSON.parse(stored) : null;\n\n            if (Array.isArray(parsed)) {\n                return parsed.filter((item): item is string => typeof item === 'string').slice(0, MAX_RECENT_COLORS);\n            }\n        } catch {\n            // ignore a broken or unavailable local storage\n        }\n        return [];\n    }\n\n    /**\n     * Remember the given color as recently used.\n     *\n     * @param color The color to remember.\n     */\n    storeRecentColor(color: string): void {\n        if (this.props.noRecentColors || !color || this.state.recentColors[0] === color) {\n            return;\n        }\n        const recentColors = [color, ...this.state.recentColors.filter(item => item !== color)].slice(\n            0,\n            MAX_RECENT_COLORS,\n        );\n\n        this.setState({ recentColors });\n\n        try {\n            window.localStorage.setItem(RECENT_COLORS_KEY, JSON.stringify(recentColors));\n        } catch {\n            // ignore an unavailable local storage\n        }\n    }\n\n    private handleClick = (e: React.MouseEvent<HTMLDivElement>): void => {\n        const open = !this.state.displayColorPicker;\n\n        this.setState({\n            displayColorPicker: open,\n            anchorEl: open ? e.currentTarget : null,\n            // read the recent colors on every open, so colors picked in another instance show up too\n            recentColors: open && !this.props.noRecentColors ? ColorPicker.readRecentColors() : this.state.recentColors,\n        });\n    };\n\n    private handleClose = (): void => {\n        this.storeRecentColor(this.state.textValue);\n        this.setState({ displayColorPicker: false, anchorEl: null });\n    };\n\n    /**\n     * The user moved a slider, clicked a swatch or used the eye dropper.\n     *\n     * @param rgba The new color.\n     */\n    private handleColorChange = (rgba: RgbaColor): void => {\n        const textValue = formatColor(rgba, this.state.format, this.props.noAlpha);\n\n        this.setState({ rgba, textValue }, () => this.props.onChange?.(textValue));\n    };\n\n    /**\n     * The user typed into the input field. The text is taken as it is and only parsed for the preview.\n     *\n     * @param textValue The entered text.\n     */\n    private handleTextChange = (textValue: string): void => {\n        const rgba = parseColor(textValue);\n\n        this.setState({ textValue, rgba: rgba || this.state.rgba }, () => this.props.onChange?.(textValue));\n    };\n\n    /**\n     * Switch between the #rrggbb, rgba() and hsla() notations.\n     *\n     * @param format The new notation.\n     */\n    private handleFormatChange = (format: ColorPickerFormat): void => {\n        if (!this.state.textValue) {\n            this.setState({ format });\n            return;\n        }\n        const textValue = formatColor(this.state.rgba, format, this.props.noAlpha);\n\n        this.setState({ format, textValue }, () => this.props.onChange?.(textValue));\n    };\n\n    private handleClear = (): void => {\n        this.setState({ textValue: '', rgba: { ...DEFAULT_COLOR } }, () => this.props.onChange?.(''));\n    };\n\n    private handleEyeDropper = (): void => {\n        const EyeDropper = getEyeDropper();\n        if (!EyeDropper) {\n            return;\n        }\n\n        void new EyeDropper()\n            .open()\n            .then(result => {\n                const rgba = parseColor(result.sRGBHex);\n                if (rgba) {\n                    // the eye dropper always returns an opaque color, so the current alpha is kept\n                    this.handleColorChange({ ...rgba, a: this.props.noAlpha ? 1 : (this.state.rgba.a ?? 1) });\n                }\n            })\n            .catch(() => {\n                // the user aborted the selection with ESC\n            });\n    };\n\n    /**\n     * Render a row of predefined colors.\n     *\n     * @param colors The colors to show.\n     * @param title The title above the row.\n     */\n    renderSwatches(colors: string[], title: string): React.JSX.Element | null {\n        if (!colors.length) {\n            return null;\n        }\n        return (\n            <Box component=\"div\">\n                <Box\n                    component=\"div\"\n                    sx={styles.sectionTitle}\n                >\n                    {title}\n                </Box>\n                <Box\n                    component=\"div\"\n                    sx={styles.swatchRow}\n                >\n                    {colors.map((color, i) => (\n                        <Button\n                            sx={styles.paletteItem}\n                            key={`${color}_${i}`}\n                            title={color}\n                            onClick={() => {\n                                const rgba = parseColor(color);\n                                if (rgba) {\n                                    this.handleColorChange(rgba);\n                                } else {\n                                    this.handleTextChange(color);\n                                }\n                            }}\n                        >\n                            <Box\n                                component=\"div\"\n                                sx={styles.fill}\n                                style={{ background: color }}\n                            />\n                        </Button>\n                    ))}\n                </Box>\n            </Box>\n        );\n    }\n\n    renderPicker(): React.JSX.Element {\n        const { rgba, textValue, format } = this.state;\n        const Picker = this.props.noAlpha ? RgbColorPicker : RgbaColorPicker;\n\n        return (\n            <Box\n                component=\"div\"\n                sx={styles.pickerWrapper}\n                style={{ width: this.props.pickerWidth || 280 }}\n            >\n                <Picker\n                    color={rgba}\n                    onChange={(color: RgbaColor | { r: number; g: number; b: number }) =>\n                        this.handleColorChange({ a: rgba.a ?? 1, ...color })\n                    }\n                />\n                <Box\n                    component=\"div\"\n                    sx={styles.controlRow}\n                >\n                    {getEyeDropper() ? (\n                        <Tooltip title={I18n.t('ra_Pick color from screen')}>\n                            <IconButton\n                                size=\"small\"\n                                onClick={this.handleEyeDropper}\n                            >\n                                <IconColorize fontSize=\"small\" />\n                            </IconButton>\n                        </Tooltip>\n                    ) : null}\n                    <Box\n                        component=\"div\"\n                        sx={styles.preview}\n                    >\n                        <Box\n                            component=\"div\"\n                            sx={styles.fill}\n                            style={{ background: textValue || 'transparent' }}\n                        />\n                    </Box>\n                    <TextField\n                        variant=\"standard\"\n                        size=\"small\"\n                        sx={styles.valueInput}\n                        value={textValue}\n                        placeholder={I18n.t('ra_Select color')}\n                        onChange={e => this.handleTextChange(e.target.value)}\n                    />\n                    <Select\n                        variant=\"standard\"\n                        disableUnderline\n                        sx={styles.formatSelect}\n                        value={format}\n                        onChange={e => this.handleFormatChange(e.target.value)}\n                    >\n                        <MenuItem value=\"hex\">HEX</MenuItem>\n                        <MenuItem value=\"rgb\">RGB</MenuItem>\n                        <MenuItem value=\"hsl\">HSL</MenuItem>\n                    </Select>\n                    <Tooltip title={I18n.t('ra_Clear color')}>\n                        <span>\n                            <IconButton\n                                size=\"small\"\n                                disabled={!textValue}\n                                onClick={this.handleClear}\n                            >\n                                <IconDelete fontSize=\"small\" />\n                            </IconButton>\n                        </span>\n                    </Tooltip>\n                </Box>\n                {this.renderSwatches(this.props.customPalette || [], I18n.t('ra_Palette'))}\n                {this.renderSwatches(\n                    this.props.noRecentColors ? [] : this.state.recentColors,\n                    I18n.t('ra_Recently used colors'),\n                )}\n            </Box>\n        );\n    }\n\n    render(): React.JSX.Element {\n        const style = { ...(this.props.style || {}) };\n        style.position = 'relative';\n        const { textValue } = this.state;\n        const hasLabel = !!(this.props.label || this.props.name);\n\n        return (\n            <Box\n                component=\"div\"\n                style={style}\n                sx={this.props.sx || undefined}\n                className={this.props.className || ''}\n            >\n                {this.props.noInputField ? null : (\n                    <TextField\n                        disabled={this.props.disabled}\n                        variant=\"standard\"\n                        id={this.props.id || 'ar_color_picker_name'}\n                        label={this.props.label || this.props.name}\n                        value={textValue}\n                        margin=\"dense\"\n                        sx={{\n                            '&.MuiFormControl-root': styles.textDense,\n                            width: textValue ? 'calc(100% - 80px)' : 'calc(100% - 56px)',\n                            mr: textValue ? undefined : 1,\n                        }}\n                        onChange={e => this.handleTextChange(e.target.value)}\n                    />\n                )}\n                {!this.props.noInputField && textValue ? (\n                    <IconButton\n                        disabled={this.props.disabled}\n                        onClick={this.handleClear}\n                        size=\"small\"\n                        style={hasLabel ? styles.delButton : undefined}\n                    >\n                        <IconDelete />\n                    </IconButton>\n                ) : null}\n                <Box\n                    component=\"div\"\n                    onClick={e => !this.props.disabled && this.handleClick(e)}\n                    title={I18n.t('ra_Select color')}\n                    sx={{\n                        ...styles.swatch,\n                        ...(this.props.disabled ? styles.swatchDisabled : undefined),\n                        marginTop: this.props.noInputField || !hasLabel ? 0 : undefined,\n                    }}\n                >\n                    <Box\n                        component=\"div\"\n                        sx={{\n                            ...styles.color,\n                            border: textValue ? undefined : '1px dashed #888',\n                            boxSizing: 'border-box',\n                        }}\n                        style={{\n                            width: this.props.noInputField ? this.props.barWidth || 16 : this.props.barWidth || 36,\n                        }}\n                    >\n                        <Box\n                            component=\"div\"\n                            sx={styles.fill}\n                            style={{ background: textValue || 'transparent' }}\n                        />\n                    </Box>\n                </Box>\n                {this.state.displayColorPicker && !this.props.disabled ? (\n                    <Popover\n                        sx={styles.popover}\n                        anchorEl={this.state.anchorEl}\n                        open={!0}\n                        onClose={this.handleClose}\n                        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n                        transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n                    >\n                        {this.renderPicker()}\n                    </Popover>\n                ) : null}\n            </Box>\n        );\n    }\n}\n"]}

package/build/Components/ObjectBrowser/ObjectBrowserClass.d.ts

@@ -32,6 +32,8 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private observedContainer;
     /** Width class for which the columns were calculated the last time */
     private lastCalculatedWidth;
+    /** States view for which the columns were calculated the last time */
+    private lastCalculatedStatesView;
     private pausedSubscribes;
     /** The tree was rebuilt while subscribes were paused, so the filter must be re-applied on resume */
     private treeRebuiltWhilePaused;
@@ -74,7 +76,12 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private resizerPosition;
     private resizerActiveDiv;
     private resizerNextDiv;
-    private storedWidths;
+    /**
+     * The column widths the user stored for this dialog, as they were written to
+     * `<dialogName>.table`. They are kept independently of the width class, because the class is
+     * only known after the container was measured and changes when the window is resized.
+     */
+    private storedColumnWidths;
     systemConfig: ioBroker.SystemConfigObject | null;
     objects: Record<string, ioBroker.Object>;
     defaultHistory: string;
@@ -128,6 +135,15 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
         initValue: boolean | number | string;
     };
     constructor(props: ObjectBrowserProps);
+    /**
+     * Write the stored column widths into the width class that is active now.
+     *
+     * Every width class has its own default widths, and the class of the object browser is only
+     * known after its container was measured - in the constructor it is still the initial guess.
+     * The stored widths must therefore be applied again whenever the class changes, otherwise the
+     * table falls back to the defaults of the new class and the user sees their widths reset.
+     */
+    applyStoredWidths(): void;
     loadAllObjects(update?: boolean): Promise<void>;
     expandAllSelected(cb?: () => void): void;
     /**

package/build/Components/ObjectBrowser/ObjectBrowserClass.js

@@ -53,6 +53,8 @@ export class ObjectBrowserClass extends Component {
     observedContainer = null;
     /** Width class for which the columns were calculated the last time */
     lastCalculatedWidth = null;
+    /** States view for which the columns were calculated the last time */
+    lastCalculatedStatesView = null;
     pausedSubscribes = false;
     /** The tree was rebuilt while subscribes were paused, so the filter must be re-applied on resume */
     treeRebuiltWhilePaused = false;
@@ -95,7 +97,12 @@ export class ObjectBrowserClass extends Component {
     resizerPosition = 0;
     resizerActiveDiv = null;
     resizerNextDiv = null;
-    storedWidths = null;
+    /**
+     * The column widths the user stored for this dialog, as they were written to
+     * `<dialogName>.table`. They are kept independently of the width class, because the class is
+     * only known after the container was measured and changes when the window is resized.
+     */
+    storedColumnWidths = null;
     systemConfig = null;
     objects;
     defaultHistory = '';
@@ -355,29 +362,51 @@ export class ObjectBrowserClass extends Component {
         const resizerCurrentWidthsStr = this.localStorage.getItem(`${this.props.dialogName || 'App'}.table`);
         if (resizerCurrentWidthsStr) {
             try {
-                const resizerCurrentWidths = JSON.parse(resizerCurrentWidthsStr);
-                const width = this.width || 'lg';
-                this.storedWidths = JSON.parse(JSON.stringify(this.screenWidths[width]));
-                Object.keys(resizerCurrentWidths).forEach(id => {
-                    if (id === 'id') {
-                        this.screenWidths[width].idWidth = resizerCurrentWidths.id;
-                    }
-                    else if (id === 'nameHeader') {
-                        // widths stored by an older version, where the header had an own width
-                        this.screenWidths[width].widths.name = resizerCurrentWidths[id];
-                    }
-                    else if (this.screenWidths[width].widths[id] !== undefined) {
-                        this.screenWidths[width].widths[id] = resizerCurrentWidths[id];
-                    }
+                const parsed = JSON.parse(resizerCurrentWidthsStr);
+                const storedColumnWidths = {};
+                Object.keys(parsed).forEach(id => {
+                    // widths stored by an older version, where the header had an own width
+                    storedColumnWidths[id === 'nameHeader' ? 'name' : id] = parsed[id];
                 });
-                this.customWidth = true;
+                this.storedColumnWidths = storedColumnWidths;
+                // The resizer has to start from the stored widths too. Without them the next drag
+                // would write only the two columns it touched back to the storage, and every other
+                // width the user had set would be lost.
+                this.resizerCurrentWidths = { ...storedColumnWidths };
             }
             catch {
-                // ignore
+                this.storedColumnWidths = null;
             }
         }
+        this.applyStoredWidths();
         this.calculateColumnsVisibility();
     }
+    /**
+     * Write the stored column widths into the width class that is active now.
+     *
+     * Every width class has its own default widths, and the class of the object browser is only
+     * known after its container was measured - in the constructor it is still the initial guess.
+     * The stored widths must therefore be applied again whenever the class changes, otherwise the
+     * table falls back to the defaults of the new class and the user sees their widths reset.
+     */
+    applyStoredWidths() {
+        if (!this.storedColumnWidths) {
+            return;
+        }
+        const screen = this.screenWidths[this.width || 'lg'];
+        const storedColumnWidths = this.storedColumnWidths;
+        Object.keys(storedColumnWidths).forEach(id => {
+            if (id === 'id') {
+                screen.idWidth = storedColumnWidths.id;
+            }
+            else if (screen.widths[id] !== undefined) {
+                // A column that this width class does not know keeps its place; only the widths of
+                // the columns the class actually shows may be overwritten.
+                screen.widths[id] = storedColumnWidths[id];
+            }
+        });
+        this.customWidth = true;
+    }
     async loadAllObjects(update) {
         const props = this.props;
         try {
@@ -1873,30 +1902,45 @@ export class ObjectBrowserClass extends Component {
         }
         else {
             const width = this.width || 'lg';
+            /**
+             * A row shows either type/role/room/function or the four columns of the states view,
+             * never both. A column of the set that is not shown must have the width zero, so that
+             * the ID column, which fills the rest of the row, gets the right place.
+             */
+            const shown = (name, inStatesView) => !!this.state.statesView === inStatesView && columns.includes(name);
+            /** Width of one column: what the user set for it, else the default of the width class */
+            const widthOf = (name) => columnsWidths[name] || WIDTHS[name] || 0;
+            /**
+             * The width classes below `lg` do not define the columns of the states view, but the
+             * user can select them by hand there too, so they fall back to the widest class.
+             */
+            const statesWidthOf = (name) => widthOf(name) || this.screenWidths.xl.widths[name] || 0;
             this.columnsVisibility = {
                 id: columnsWidths.id || this.screenWidths[width].idWidth,
-                name: columns.includes('name')
-                    ? columnsWidths.name || WIDTHS.name || this.screenWidths[width].widths.name || 0
-                    : 0,
-                type: columns.includes('type')
-                    ? columnsWidths.type || WIDTHS.type || this.screenWidths[width].widths.type || 0
-                    : 0,
-                role: columns.includes('role')
-                    ? columnsWidths.role || WIDTHS.role || this.screenWidths[width].widths.role || 0
-                    : 0,
-                room: columns.includes('room')
-                    ? columnsWidths.room || WIDTHS.room || this.screenWidths[width].widths.room || 0
-                    : 0,
-                func: columns.includes('func')
-                    ? columnsWidths.func || WIDTHS.func || this.screenWidths[width].widths.func || 0
-                    : 0,
+                name: columns.includes('name') ? widthOf('name') : 0,
+                type: shown('type', false) ? widthOf('type') : 0,
+                role: shown('role', false) ? widthOf('role') : 0,
+                room: shown('room', false) ? widthOf('room') : 0,
+                func: shown('func', false) ? widthOf('func') : 0,
+                // The states view columns were missing here completely: their checkboxes in the
+                // configuration dialog had no effect, and the header showed them although no row
+                // had a cell for them.
+                changedFrom: shown('changedFrom', true) ? statesWidthOf('changedFrom') : 0,
+                qualityCode: shown('qualityCode', true) ? statesWidthOf('qualityCode') : 0,
+                timestamp: shown('timestamp', true) ? statesWidthOf('timestamp') : 0,
+                lastChange: shown('lastChange', true) ? statesWidthOf('lastChange') : 0,
             };
             let widthSum = this.columnsVisibility.id; // id is always visible
             if (this.columnsVisibility.name) {
+                // Only one of the two sets has a width, so both may be added up
                 widthSum += this.columnsVisibility.type || 0;
                 widthSum += this.columnsVisibility.role || 0;
                 widthSum += this.columnsVisibility.room || 0;
                 widthSum += this.columnsVisibility.func || 0;
+                widthSum += this.columnsVisibility.changedFrom || 0;
+                widthSum += this.columnsVisibility.qualityCode || 0;
+                widthSum += this.columnsVisibility.timestamp || 0;
+                widthSum += this.columnsVisibility.lastChange || 0;
             }
             if (columnsForAdmin && columns) {
                 Object.keys(columnsForAdmin)
@@ -2049,6 +2093,10 @@ export class ObjectBrowserClass extends Component {
         }
     };
     resizerMouseUp = () => {
+        // Remember the new widths for the other width classes as well: the drag only changed two CSS
+        // variables, the width class of the container may change at any time afterwards.
+        this.storedColumnWidths = { ...this.resizerCurrentWidths };
+        this.applyStoredWidths();
         this.localStorage.setItem(`${this.props.dialogName || 'App'}.table`, JSON.stringify(this.resizerCurrentWidths));
         this.resizerActiveName = null;
         this.resizerNextName = null;
@@ -2058,7 +2106,6 @@ export class ObjectBrowserClass extends Component {
         window.removeEventListener('mouseup', this.resizerMouseUp);
     };
     resizerMouseDown = (e) => {
-        this.storedWidths ||= JSON.parse(JSON.stringify(this.screenWidths[this.width || 'lg']));
         this.resizerCurrentWidths ||= {};
         this.resizerActiveDiv = e.target.parentNode;
         this.resizerActiveName = this.resizerActiveDiv.dataset.name || null;
@@ -2085,6 +2132,12 @@ export class ObjectBrowserClass extends Component {
                     i++;
                 } */
             }
+            if (!this.resizerNextDiv) {
+                // The column is the last one of the row, there is no neighbour to take the place from
+                this.resizerActiveDiv = null;
+                this.resizerActiveName = null;
+                return;
+            }
             this.resizerNextName = this.resizerNextDiv.dataset.name || null;
             this.resizerMin = parseInt(this.resizerActiveDiv.dataset.min, 10) || 0;
             this.resizerNextMin = parseInt(this.resizerNextDiv.dataset.min, 10) || 0;
@@ -2167,7 +2220,13 @@ export class ObjectBrowserClass extends Component {
     }
     resizerReset = () => {
         this.customWidth = false;
-        this.screenWidths[this.width || 'lg'] = JSON.parse(JSON.stringify(this.storedWidths));
+        this.storedColumnWidths = null;
+        this.resizerCurrentWidths = {};
+        // Back to the defaults of every width class, not only of the one that is active now - the
+        // stored widths had been applied to every class the user had the browser open in.
+        Object.keys(SCREEN_WIDTHS).forEach(width => {
+            this.screenWidths[width] = JSON.parse(JSON.stringify(SCREEN_WIDTHS[width]));
+        });
         this.calculateColumnsVisibility();
         this.localStorage.removeItem(`${this.props.dialogName || 'App'}.table`);
         this.forceUpdate();
@@ -2381,9 +2440,13 @@ export class ObjectBrowserClass extends Component {
         if (!this.state.loaded) {
             return React.createElement(LinearProgress, { key: `${this.props.dialogName}_c` });
         }
-        // the container was resized into another width class => other columns are visible
-        if (this.lastCalculatedWidth !== this.width) {
+        // the container was resized into another width class => other columns are visible, and the
+        // stored widths have to be written into the defaults of the new class.
+        // The states view shows other columns too, so it has to be recalculated as well.
+        if (this.lastCalculatedWidth !== this.width || this.lastCalculatedStatesView !== this.state.statesView) {
             this.lastCalculatedWidth = this.width;
+            this.lastCalculatedStatesView = this.state.statesView;
+            this.applyStoredWidths();
             this.calculateColumnsVisibility();
         }
         const items = this.root ? this.renderItem(this.root, undefined) : null;