smart-webcomponents/source/components/smart.ui.editor.js

Web Components & Custom Elements for Professional Web Applications

/*! For license information please see smart.ui.editor.js.LICENSE.txt */
(()=>{var e={2989:(e,t,n)=>{"use strict";n.d(t,{A:()=>s});var r=n(1601),o=n.n(r),a=n(6314),i=n.n(a)()(o());i.push([e.id,"/* smart-button, smart-repeat-button, smart-toggle-button */\nsmart-button,\nsmart-toggle-button,\nsmart-repeat-button,\n.smart-button-element {\n  --smart-button-flat-color: var(--smart-background-color);\n  text-align: center;\n  display: inline-flex;\n  vertical-align: middle;\n  cursor: pointer;\n  text-transform: var(--smart-button-text-transform);\n  letter-spacing: 0.08929em;\n  overflow: hidden;\n  border-color: var(--smart-border);\n  border-top-left-radius: var(--smart-border-top-left-radius);\n  border-top-right-radius: var(--smart-border-top-right-radius);\n  border-bottom-left-radius: var(--smart-border-bottom-left-radius);\n  border-bottom-right-radius: var(--smart-border-bottom-right-radius);\n  border-width: var(--smart-border-width);\n  border-style: solid;\n  visibility: hidden;\n  font-weight: 500;\n}\nsmart-button.smart-element,\nsmart-toggle-button.smart-element,\nsmart-repeat-button.smart-element,\n.smart-button-element.smart-element {\n  display: inline-flex;\n  visibility: inherit;\n}\nsmart-button button::-moz-focus-inner,\nsmart-toggle-button button::-moz-focus-inner,\nsmart-repeat-button button::-moz-focus-inner,\n.smart-button-element button::-moz-focus-inner {\n  border: 0;\n}\nsmart-button.primary,\nsmart-toggle-button.primary,\nsmart-repeat-button.primary,\n.smart-button-element.primary {\n  --smart-button-opacity-hover: 0.75;\n  --smart-button-opacity-focus: 0.7;\n  --smart-button-opacity-active: 0.65;\n  --smart-background: var(--smart-primary);\n  --smart-border: var(--smart-primary);\n  --smart-border-rgb: var(--smart-primary-rgb);\n  --smart-background-color: var(--smart-primary-color);\n  --smart-ui-state-hover: var(--smart-primary);\n  --smart-ui-state-border-hover: var(--smart-primary);\n  --smart-ui-state-color-hover: var(--smart-primary-color);\n  --smart-ui-state-active: var(--smart-primary);\n  --smart-ui-state-border-active: var(--smart-primary);\n  --smart-ui-state-color-active: var(--smart-primary-color);\n  --smart-ui-state-focus: var(--smart-primary);\n  --smart-ui-state-border-focus: var(--smart-primary);\n  --smart-ui-state-color-focus: var(--smart-primary-color);\n  --smart-button-flat-color: var(--smart-primary);\n  --smart-button-outlined-color: var(--smart-primary);\n  --smart-button-outlined-border: var(--smart-primary);\n}\nsmart-button.secondary,\nsmart-toggle-button.secondary,\nsmart-repeat-button.secondary,\n.smart-button-element.secondary {\n  --smart-button-opacity-hover: 0.75;\n  --smart-button-opacity-focus: 0.7;\n  --smart-button-opacity-active: 0.65;\n  --smart-background: var(--smart-secondary);\n  --smart-border: var(--smart-secondary);\n  --smart-border-rgb: var(--smart-secondary-rgb);\n  --smart-background-color: var(--smart-secondary-color);\n  --smart-ui-state-hover: var(--smart-secondary);\n  --smart-ui-state-border-hover: var(--smart-secondary);\n  --smart-ui-state-color-hover: var(--smart-secondary-color);\n  --smart-ui-state-active: var(--smart-secondary);\n  --smart-ui-state-border-active: var(--smart-secondary);\n  --smart-ui-state-color-active: var(--smart-secondary-color);\n  --smart-ui-state-focus: var(--smart-secondary);\n  --smart-ui-state-border-focus: var(--smart-secondary);\n  --smart-ui-state-color-focus: var(--smart-secondary-color);\n  --smart-button-flat-color: var(--smart-secondary);\n  --smart-button-outlined-color: var(--smart-secondary);\n  --smart-button-outlined-border: var(--smart-secondary);\n}\nsmart-button.success,\nsmart-toggle-button.success,\nsmart-repeat-button.success,\n.smart-button-element.success {\n  --smart-button-opacity-hover: 0.75;\n  --smart-button-opacity-focus: 0.7;\n  --smart-button-opacity-active: 0.65;\n  --smart-background: var(--smart-success);\n  --smart-border: var(--smart-success);\n  --smart-border-rgb: var(--smart-success-rgb);\n  --smart-background-color: var(--smart-success-color);\n  --smart-ui-state-hover: var(--smart-success);\n  --smart-ui-state-border-hover: var(--smart-success);\n  --smart-ui-state-color-hover: var(--smart-success-color);\n  --smart-ui-state-active: var(--smart-success);\n  --smart-ui-state-border-active: var(--smart-success);\n  --smart-ui-state-color-active: var(--smart-success-color);\n  --smart-ui-state-focus: var(--smart-success);\n  --smart-ui-state-border-focus: var(--smart-success);\n  --smart-ui-state-color-focus: var(--smart-success-color);\n  --smart-button-flat-color: var(--smart-success);\n  --smart-button-outlined-color: var(--smart-success);\n  --smart-button-outlined-border: var(--smart-success);\n}\nsmart-button.error,\nsmart-toggle-button.error,\nsmart-repeat-button.error,\n.smart-button-element.error {\n  --smart-button-opacity-hover: 0.75;\n  --smart-button-opacity-focus: 0.7;\n  --smart-button-opacity-active: 0.65;\n  --smart-background: var(--smart-error);\n  --smart-border: var(--smart-error);\n  --smart-border-rgb: var(--smart-error-rgb);\n  --smart-background-color: var(--smart-error-color);\n  --smart-ui-state-hover: var(--smart-error);\n  --smart-ui-state-border-hover: var(--smart-error);\n  --smart-ui-state-color-hover: var(--smart-error-color);\n  --smart-ui-state-active: var(--smart-error);\n  --smart-ui-state-border-active: var(--smart-error);\n  --smart-ui-state-color-active: var(--smart-error-color);\n  --smart-ui-state-focus: var(--smart-error);\n  --smart-ui-state-border-focus: var(--smart-error);\n  --smart-ui-state-color-focus: var(--smart-error-color);\n  --smart-button-flat-color: var(--smart-error);\n  --smart-button-outlined-color: var(--smart-error);\n  --smart-button-outlined-border: var(--smart-error);\n}\nsmart-button.info,\nsmart-toggle-button.info,\nsmart-repeat-button.info,\n.smart-button-element.info {\n  --smart-button-opacity-hover: 0.75;\n  --smart-button-opacity-focus: 0.7;\n  --smart-button-opacity-active: 0.65;\n  --smart-background: var(--smart-info);\n  --smart-border: var(--smart-info);\n  --smart-border-rgb: var(--smart-info-rgb);\n  --smart-background-color: var(--smart-info-color);\n  --smart-ui-state-hover: var(--smart-info);\n  --smart-ui-state-border-hover: var(--smart-info);\n  --smart-ui-state-color-hover: var(--smart-info-color);\n  --smart-ui-state-active: var(--smart-info);\n  --smart-ui-state-border-active: var(--smart-info);\n  --smart-ui-state-color-active: var(--smart-info-color);\n  --smart-ui-state-focus: var(--smart-info);\n  --smart-ui-state-border-focus: var(--smart-info);\n  --smart-ui-state-color-focus: var(--smart-info-color);\n  --smart-button-flat-color: var(--smart-info);\n  --smart-button-outlined-color: var(--smart-info);\n  --smart-button-outlined-border: var(--smart-info);\n}\nsmart-button.warning,\nsmart-toggle-button.warning,\nsmart-repeat-button.warning,\n.smart-button-element.warning {\n  --smart-button-opacity-hover: 0.75;\n  --smart-button-opacity-focus: 0.7;\n  --smart-button-opacity-active: 0.65;\n  --smart-background: var(--smart-warning);\n  --smart-border: var(--smart-warning);\n  --smart-border-rgb: var(--smart-warning-rgb);\n  --smart-background-color: var(--smart-warning-color);\n  --smart-ui-state-hover: var(--smart-warning);\n  --smart-ui-state-border-hover: var(--smart-warning);\n  --smart-ui-state-color-hover: var(--smart-warning-color);\n  --smart-ui-state-active: var(--smart-warning);\n  --smart-ui-state-border-active: var(--smart-warning);\n  --smart-ui-state-color-active: var(--smart-warning-color);\n  --smart-ui-state-focus: var(--smart-warning);\n  --smart-ui-state-border-focus: var(--smart-warning);\n  --smart-ui-state-color-focus: var(--smart-warning-color);\n  --smart-button-flat-color: var(--smart-warning);\n  --smart-button-outlined-color: var(--smart-warning);\n  --smart-button-outlined-border: var(--smart-warning);\n}\nsmart-button.light,\nsmart-toggle-button.light,\nsmart-repeat-button.light,\n.smart-button-element.light {\n  --smart-button-opacity-hover: 0.75;\n  --smart-button-opacity-focus: 0.7;\n  --smart-button-opacity-active: 0.65;\n  --smart-background: var(--smart-light);\n  --smart-border: var(--smart-light);\n  --smart-border-rgb: var(--smart-light-rgb);\n  --smart-background-color: var(--smart-light-color);\n  --smart-ui-state-hover: var(--smart-light);\n  --smart-ui-state-border-hover: var(--smart-light);\n  --smart-ui-state-color-hover: var(--smart-light-color);\n  --smart-ui-state-active: var(--smart-light);\n  --smart-ui-state-border-active: var(--smart-light);\n  --smart-ui-state-color-active: var(--smart-light-color);\n  --smart-ui-state-focus: var(--smart-light);\n  --smart-ui-state-border-focus: var(--smart-light);\n  --smart-ui-state-color-focus: var(--smart-light-color);\n  --smart-button-flat-color: var(--smart-light);\n  --smart-button-outlined-color: var(--smart-light);\n  --smart-button-outlined-border: var(--smart-light);\n}\nsmart-button.dark,\nsmart-toggle-button.dark,\nsmart-repeat-button.dark,\n.smart-button-element.dark {\n  --smart-button-opacity-hover: 0.75;\n  --smart-button-opacity-focus: 0.7;\n  --smart-button-opacity-active: 0.65;\n  --smart-background: var(--smart-dark);\n  --smart-border: var(--smart-dark);\n  --smart-border-rgb: var(--smart-dark-rgb);\n  --smart-background-color: var(--smart-dark-color);\n  --smart-ui-state-hover: var(--smart-dark);\n  --smart-ui-state-border-hover: var(--smart-dark);\n  --smart-ui-state-color-hover: var(--smart-dark-color);\n  --smart-ui-state-active: var(--smart-dark);\n  --smart-ui-state-border-active: var(--smart-dark);\n  --smart-ui-state-color-active: var(--smart-dark-color);\n  --smart-ui-state-focus: var(--smart-dark);\n  --smart-ui-state-border-focus: var(--smart-dark);\n  --smart-ui-state-color-focus: var(--smart-dark-color);\n  --smart-button-flat-color: var(--smart-dark);\n  --smart-button-outlined-color: var(--smart-dark);\n  --smart-button-outlined-border: var(--smart-dark);\n}\nsmart-button[hover],\nsmart-toggle-button[hover],\nsmart-repeat-button[hover],\n.smart-button-element[hover] {\n  color: var(--smart-ui-state-color-hover);\n  border-color: var(--smart-ui-state-border-hover);\n  background-color: var(--smart-ui-state-hover);\n  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;\n  opacity: var(--smart-button-opacity-hover);\n}\nsmart-button[focus],\nsmart-toggle-button[focus],\nsmart-repeat-button[focus],\n.smart-button-element[focus] {\n  color: var(--smart-ui-state-color-focus);\n  border-color: var(--smart-ui-state-border-focus);\n  background-color: var(--smart-ui-state-focus);\n  opacity: var(--smart-button-opacity-focus);\n}\nsmart-button[active],\nsmart-toggle-button[active],\nsmart-repeat-button[active],\n.smart-button-element[active] {\n  color: var(--smart-ui-state-color-active);\n  border-color: var(--smart-ui-state-border-active);\n  background-color: var(--smart-ui-state-active);\n  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;\n  opacity: var(--smart-button-opacity-active);\n}\nsmart-button[disabled],\nsmart-toggle-button[disabled],\nsmart-repeat-button[disabled],\n.smart-button-element[disabled] {\n  color: var(--smart-disabled-color);\n  border-color: var(--smart-disabled);\n  background-color: var(--smart-disabled);\n  cursor: default;\n  --smart-background: var(--smart-disabled);\n  --smart-border: var(--smart-disabled);\n  --smart-background-color: var(--smart-disabled-color);\n}\nsmart-button.large button,\nsmart-toggle-button.large button,\nsmart-repeat-button.large button,\n.smart-button-element.large button {\n  padding: var(--smart-button-large-padding);\n  font-size: var(--smart-button-large-font-size);\n}\nsmart-button.small button,\nsmart-toggle-button.small button,\nsmart-repeat-button.small button,\n.smart-button-element.small button {\n  padding: var(--smart-button-small-padding);\n  font-size: var(--smart-button-small-font-size);\n}\nsmart-button.very-small button,\nsmart-toggle-button.very-small button,\nsmart-repeat-button.very-small button,\n.smart-button-element.very-small button {\n  padding: var(--smart-button-very-small-padding);\n  font-size: var(--smart-button-very-small-font-size);\n}\nsmart-button.rounded,\nsmart-toggle-button.rounded,\nsmart-repeat-button.rounded,\n.smart-button-element.rounded {\n  --smart-border-top-left-radius: 50px;\n  --smart-border-top-right-radius: 50px;\n  --smart-border-bottom-left-radius: 50px;\n  --smart-border-bottom-right-radius: 50px;\n  border-radius: var(--smart-border-bottom-left-radius) !important;\n}\nsmart-button.squared,\nsmart-toggle-button.squared,\nsmart-repeat-button.squared,\n.smart-button-element.squared {\n  --smart-border-top-left-radius: 0;\n  --smart-border-top-right-radius: 0;\n  --smart-border-bottom-left-radius: 0;\n  --smart-border-bottom-right-radius: 0;\n}\nsmart-button.flat,\nsmart-toggle-button.flat,\nsmart-repeat-button.flat,\n.smart-button-element.flat {\n  color: var(--smart-button-flat-color);\n  background: transparent;\n  border-color: transparent;\n}\nsmart-button.flat[hover],\nsmart-toggle-button.flat[hover],\nsmart-repeat-button.flat[hover],\n.smart-button-element.flat[hover] {\n  color: var(--smart-button-flat-color);\n  background: transparent;\n  border-color: transparent;\n}\nsmart-button.flat[active],\nsmart-toggle-button.flat[active],\nsmart-repeat-button.flat[active],\n.smart-button-element.flat[active] {\n  color: var(--smart-button-flat-color);\n  background: transparent;\n  border-color: transparent;\n}\nsmart-button.flat[focus],\nsmart-toggle-button.flat[focus],\nsmart-repeat-button.flat[focus],\n.smart-button-element.flat[focus] {\n  border-color: var(--smart-ui-state-focus);\n}\nsmart-button.flat[checked],\nsmart-toggle-button.flat[checked],\nsmart-repeat-button.flat[checked],\n.smart-button-element.flat[checked] {\n  text-decoration: underline;\n  background: var(--smart-ui-state-active);\n}\nsmart-button.flat .smart-ripple,\nsmart-toggle-button.flat .smart-ripple,\nsmart-repeat-button.flat .smart-ripple,\n.smart-button-element.flat .smart-ripple {\n  background-color: var(--smart-button-flat-color);\n}\nsmart-button.outlined,\nsmart-toggle-button.outlined,\nsmart-repeat-button.outlined,\n.smart-button-element.outlined {\n  color: var(--smart-button-outlined-color);\n  border-color: var(--smart-button-outlined-border);\n  background: transparent;\n  border-width: calc(2 * var(--smart-border-width));\n}\nsmart-button.outlined[hover],\nsmart-toggle-button.outlined[hover],\nsmart-repeat-button.outlined[hover],\n.smart-button-element.outlined[hover] {\n  color: var(--smart-button-outlined-color);\n  border-color: var(--smart-button-outlined-border);\n  background: transparent;\n}\nsmart-button.outlined[active],\nsmart-toggle-button.outlined[active],\nsmart-repeat-button.outlined[active],\n.smart-button-element.outlined[active] {\n  color: var(--smart-button-outlined-color);\n  border-color: var(--smart-button-outlined-border);\n  background: transparent;\n}\nsmart-button.outlined[focus],\nsmart-toggle-button.outlined[focus],\nsmart-repeat-button.outlined[focus],\n.smart-button-element.outlined[focus] {\n  color: var(--smart-button-outlined-color);\n  border-color: var(--smart-ui-state-focus);\n  background: transparent;\n}\nsmart-button.outlined[checked],\nsmart-toggle-button.outlined[checked],\nsmart-repeat-button.outlined[checked],\n.smart-button-element.outlined[checked] {\n  color: var(--smart-ui-state-color-active);\n  border-color: var(--smart-ui-state-active);\n  background: var(--smart-ui-state-active);\n}\nsmart-button.outlined .smart-ripple,\nsmart-toggle-button.outlined .smart-ripple,\nsmart-repeat-button.outlined .smart-ripple,\n.smart-button-element.outlined .smart-ripple {\n  background-color: var(--smart-button-outlined-color);\n}\nsmart-button.outlined button.smart-button,\nsmart-toggle-button.outlined button.smart-button,\nsmart-repeat-button.outlined button.smart-button,\n.smart-button-element.outlined button.smart-button {\n  border-radius: initial;\n}\nsmart-button.raised,\nsmart-toggle-button.raised,\nsmart-repeat-button.raised,\n.smart-button-element.raised {\n  box-shadow: var(--smart-elevation-2);\n  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;\n}\nsmart-button.raised[hover],\nsmart-toggle-button.raised[hover],\nsmart-repeat-button.raised[hover],\n.smart-button-element.raised[hover] {\n  box-shadow: var(--smart-elevation-4);\n}\nsmart-button.raised[active], smart-button.raised[checked], smart-button.raised[active],\nsmart-button.raised button[active],\nsmart-toggle-button.raised[active],\nsmart-toggle-button.raised[checked],\nsmart-toggle-button.raised[active],\nsmart-toggle-button.raised button[active],\nsmart-repeat-button.raised[active],\nsmart-repeat-button.raised[checked],\nsmart-repeat-button.raised[active],\nsmart-repeat-button.raised button[active],\n.smart-button-element.raised[active],\n.smart-button-element.raised[checked],\n.smart-button-element.raised[active],\n.smart-button-element.raised button[active] {\n  box-shadow: var(--smart-elevation-8);\n}\nsmart-button.raised[focus], smart-button.raised[focus]:not([checked]),\nsmart-toggle-button.raised[focus],\nsmart-toggle-button.raised[focus]:not([checked]),\nsmart-repeat-button.raised[focus],\nsmart-repeat-button.raised[focus]:not([checked]),\n.smart-button-element.raised[focus],\n.smart-button-element.raised[focus]:not([checked]) {\n  box-shadow: var(--smart-elevation-6);\n}\nsmart-button.floating,\nsmart-toggle-button.floating,\nsmart-repeat-button.floating,\n.smart-button-element.floating {\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  box-shadow: var(--smart-elevation-4);\n  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;\n}\nsmart-button.floating[hover],\nsmart-toggle-button.floating[hover],\nsmart-repeat-button.floating[hover],\n.smart-button-element.floating[hover] {\n  box-shadow: var(--smart-elevation-6);\n}\nsmart-button.floating[active], smart-button.floating[checked],\nsmart-toggle-button.floating[active],\nsmart-toggle-button.floating[checked],\nsmart-repeat-button.floating[active],\nsmart-repeat-button.floating[checked],\n.smart-button-element.floating[active],\n.smart-button-element.floating[checked] {\n  box-shadow: var(--smart-elevation-12);\n}\nsmart-button.floating[focus], smart-button.floating[focus]:not([checked]),\nsmart-toggle-button.floating[focus],\nsmart-toggle-button.floating[focus]:not([checked]),\nsmart-repeat-button.floating[focus],\nsmart-repeat-button.floating[focus]:not([checked]),\n.smart-button-element.floating[focus],\n.smart-button-element.floating[focus]:not([checked]) {\n  box-shadow: var(--smart-elevation-6);\n}\n\nbutton.smart-button {\n  position: relative;\n  padding: var(--smart-button-padding);\n  text-align: inherit;\n  vertical-align: inherit;\n  cursor: inherit;\n  text-transform: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  background: inherit;\n  color: inherit;\n  border: none;\n  -webkit-font-smoothing: antialiased;\n  opacity: var(--smart-button-opacity);\n  white-space: nowrap;\n  border-radius: inherit;\n}\n\n.smart-button .smart-ripple {\n  background: var(--smart-background-color);\n}\n\nsmart-toggle-button .smart-container,\n[smart-toggle-button] .smart-container {\n  font-weight: inherit;\n  font-style: inherit;\n}\nsmart-toggle-button[checked],\n[smart-toggle-button][checked] {\n  color: var(--smart-ui-state-color-selected);\n  border-color: var(--smart-ui-state-border-selected);\n  background-color: var(--smart-ui-state-selected);\n}\n\n.smart-scroll-button .smart-button {\n  padding: 0px;\n}\n\n:host(.smart-button.flat) .smart-ripple {\n  background-color: var(--smart-button-flat-color);\n}\n\n:host(.smart-button.outlined) .smart-ripple {\n  background-color: var(--smart-button-outlined-color);\n}\n\nbutton.smart-button[type]:not(.smart-container) {\n  border-color: var(--smart-border);\n  border-top-left-radius: var(--smart-border-top-left-radius);\n  border-top-right-radius: var(--smart-border-top-right-radius);\n  border-bottom-left-radius: var(--smart-border-bottom-left-radius);\n  border-bottom-right-radius: var(--smart-border-bottom-right-radius);\n  border-width: var(--smart-border-width);\n  border-style: solid;\n  text-align: center;\n  vertical-align: middle;\n  cursor: pointer;\n  text-transform: var(--smart-button-text-transform);\n  font-weight: 500;\n  letter-spacing: 0.08929em;\n  overflow: hidden;\n  font-style: var(--smart-font-style);\n  font-size: var(--smart-font-size);\n  background: var(--smart-background);\n  outline: none;\n}\n\nbutton.smart-button[type]:hover {\n  color: var(--smart-ui-state-color-hover);\n  border-color: var(--smart-ui-state-border-hover);\n  background-color: var(--smart-ui-state-hover);\n}\n\nbutton.smart-button[type]:not([disabled]):active {\n  color: var(--smart-ui-state-color-active);\n  border-color: var(--smart-ui-state-border-active);\n  background-color: var(--smart-ui-state-active);\n}\n\n/* smart-button, smart-repeat-button, smart-toggle-button */\nsmart-button[right-to-left],\nsmart-toggle-button[right-to-left],\nsmart-repeat-button[right-to-left] {\n  direction: rtl;\n}",""]);const s=i},8430:(e,t,n)=>{"use strict";n.d(t,{A:()=>s});var r=n(1601),o=n.n(r),a=n(6314),i=n.n(a)()(o());i.push([e.id,'/* smart-check-box */\nsmart-check-box {\n  display: inline-block;\n  outline: none;\n  height: var(--smart-editor-height);\n  font-family: var(--smart-check-box-font-family);\n  font-size: var(--smart-check-box-font-size);\n  cursor: pointer;\n  line-height: 1;\n}\nsmart-check-box .smart-container {\n  position: relative;\n  display: flex;\n  /*justify-content: center;*/\n  align-items: center;\n}\nsmart-check-box .smart-overlay {\n  top: 0;\n  height: 100%;\n  background: var(--smart-check-box-background-active);\n  width: var(--smart-editor-height);\n  position: absolute;\n  left: 2px;\n  border-radius: 100%;\n  padding: 0px;\n  opacity: 0;\n  box-sizing: content-box;\n  transition: opacity 280ms ease-in-out;\n}\nsmart-check-box .smart-input {\n  width: var(--smart-check-box-default-size);\n  min-width: var(--smart-check-box-default-size);\n  height: var(--smart-check-box-default-size);\n  min-height: var(--smart-check-box-default-size);\n  background-color: var(--smart-check-box-background);\n  box-sizing: initial;\n  border-style: solid;\n  border-width: var(--smart-check-box-border-width);\n  border-color: var(--smart-check-box-border);\n  display: inline-block;\n  color: var(--smart-check-box-color);\n  border-top-left-radius: var(--smart-check-box-border-top-left-radius);\n  border-top-right-radius: var(--smart-check-box-border-top-right-radius);\n  border-bottom-left-radius: var(--smart-check-box-border-bottom-left-radius);\n  border-bottom-right-radius: var(--smart-check-box-border-bottom-right-radius);\n  margin: 0 0 0 8px;\n  transition: background linear 0.2s;\n  position: relative;\n}\nsmart-check-box .smart-input:after {\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  font-style: normal;\n  font-variant: normal;\n  font-family: "Material icons";\n  font-size: 15px;\n  font-weight: 100;\n  text-decoration: inherit;\n  text-transform: none;\n  color: inherit;\n  line-height: 100%;\n}\nsmart-check-box .smart-label {\n  color: var(--smart-check-box-color);\n  font-size: var(--smart-check-box-font-size);\n  font-family: var(--smart-check-box-font-family);\n  margin: 0 8px 0 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: auto;\n}\nsmart-check-box .smart-ripple {\n  background: var(--smart-check-box-background-active);\n}\nsmart-check-box:focus .smart-input, smart-check-box[focus] .smart-input {\n  outline: none;\n  overflow: visible;\n  border-color: var(--smart-check-box-border-focus);\n  background-color: var(--smart-check-box-background-focus);\n  color: var(--smart-check-box-color-focus);\n}\nsmart-check-box:focus .smart-overlay, smart-check-box[focus] .smart-overlay {\n  opacity: 0.3;\n}\nsmart-check-box:focus[active] .smart-overlay, smart-check-box[focus][active] .smart-overlay {\n  opacity: 0.4;\n}\nsmart-check-box[hover] .smart-input {\n  border-color: var(--smart-check-box-border-hover);\n  background-color: var(--smart-check-box-background-hover);\n  color: var(--smart-check-box-color-hover);\n}\nsmart-check-box[active] .smart-input {\n  border-color: var(--smart-check-box-border-active);\n  background-color: var(--smart-check-box-background-active);\n  color: var(--smart-check-box-color-active);\n}\nsmart-check-box[checked] .smart-input {\n  border-color: var(--smart-check-box-border-active);\n  background-color: var(--smart-check-box-background-active);\n  color: var(--smart-check-box-color-active);\n}\nsmart-check-box[checked] .smart-input:after {\n  content: "\\e876";\n  font-family: "Material icons";\n  font-size: 15px;\n  font-weight: 100;\n}\nsmart-check-box[checked=null] .smart-input:after {\n  content: "-";\n}\nsmart-check-box[check-mode=label] {\n  cursor: default;\n}\nsmart-check-box[check-mode=label] .smart-label {\n  cursor: pointer;\n}\nsmart-check-box[check-mode=input] {\n  cursor: default;\n}\nsmart-check-box[check-mode=input] .smart-input {\n  cursor: pointer;\n}\nsmart-check-box[readonly] {\n  cursor: initial;\n}\nsmart-check-box[readonly] .smart-input,\nsmart-check-box[readonly] .smart-label {\n  cursor: initial;\n}\n\n/* smart-check-box */\nsmart-check-box[right-to-left] .smart-container,\nsmart-check-box[right-to-left] .smart-hidden-input {\n  direction: rtl;\n}\nsmart-check-box[right-to-left] .smart-overlay {\n  left: initial;\n  right: 2px;\n}\nsmart-check-box[right-to-left] .smart-input {\n  margin: 0 8px 0 0;\n}',""]);const s=i},3600:(e,t,n)=>{"use strict";n.d(t,{A:()=>s});var r=n(1601),o=n.n(r),a=n(6314),i=n.n(a)()(o());i.push([e.id,'/* smart-color-panel */\nsmart-color-panel {\n  width: var(--smart-color-panel-default-width);\n  height: var(--smart-color-panel-default-height);\n  user-select: none;\n}\nsmart-color-panel .no-touch {\n  touch-action: none;\n}\nsmart-color-panel.smart-element {\n  display: inline-block;\n  overflow: initial;\n  border: none;\n  background: var(--smart-background);\n  color: var(--smart-background-color);\n}\nsmart-color-panel[disabled] {\n  opacity: 0.55;\n  pointer-events: none;\n  user-select: none;\n}\n\n.smart-color-panel .smart-content {\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n.smart-color-panel label {\n  /*min-width: 16px;*/\n  display: inline-block;\n  user-select: none;\n}\n.smart-color-panel smart-tooltip .smart-tooltip-content {\n  box-shadow: 0px 0px 20px 0px #8b8b8b;\n}\n.smart-color-panel input[type=number]::-webkit-inner-spin-button,\n.smart-color-panel input[type=number]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.smart-color-panel input[type=number] {\n  -moz-appearance: textfield;\n  -webkit-appearance: textfied;\n}\n.smart-color-panel .color-input {\n  width: 70px;\n  height: var(--smart-editor-height);\n  margin: 5px;\n  padding: 5px;\n  border: var(--smart-border-width) solid var(--smart-border);\n  border-radius: var(--smart-border-radius);\n  background: var(--smart-background);\n  color: var(--smart-color);\n  outline: none;\n}\n.smart-color-panel .color-input:focus {\n  border-color: var(--smart-outline);\n}\n.smart-color-panel .color-input::selection {\n  background: var(--smart-editor-selection);\n  color: var(--smart-editor-selection-color);\n}\n.smart-color-panel .grid-mode-container,\n.smart-color-panel .palette-mode-container {\n  width: 100%;\n  max-height: 100%;\n  position: relative;\n}\n.smart-color-panel .custom-color-selection .buttons-container {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.smart-color-panel .gray-shades-box,\n.smart-color-panel .spectrum-box,\n.smart-color-panel .custom-colors-box,\n.smart-color-panel .grid-samples-container {\n  display: grid;\n  grid-template-columns: repeat(var(--smart-color-panel-grid-mode-column-count), auto);\n}\n.smart-color-panel .hue-scale {\n  display: block;\n  max-width: 100px;\n  height: var(--smart-color-panel-palette-size);\n  background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);\n  /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */\n  width: 20px;\n  margin-left: 15px;\n  margin-right: 15px;\n  position: relative;\n  padding: 1px;\n  border: var(--smart-border-width) solid var(--smart-border);\n  background-clip: content-box;\n  -webkit-background-clip: content-box;\n}\n.smart-color-panel .hue-scale-thumb {\n  width: 100%;\n  height: 10px;\n  box-sizing: content-box;\n  border: 3px solid white;\n  border-left-width: 10px;\n  border-right-width: 10px;\n  position: absolute;\n  left: -10px;\n  top: -3px;\n  box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;\n  opacity: 0.8;\n  cursor: pointer;\n}\n.smart-color-panel .color-palette-thumb {\n  width: 0px;\n  height: 0px;\n  top: 0px;\n  position: absolute;\n  z-index: 10;\n  pointer-events: none;\n}\n.smart-color-panel .color-palette-thumb:after {\n  content: " ";\n  position: absolute;\n  left: -14px;\n  top: -14px;\n  width: 16px;\n  height: 16px;\n  border: 5px solid white;\n  border-radius: 50%;\n  box-shadow: var(--smart-elevation-2);\n}\n.smart-color-panel .color-palette {\n  width: var(--smart-color-panel-palette-size);\n  height: var(--smart-color-panel-palette-size);\n  background-color: red;\n  display: block;\n  position: relative;\n  overflow: hidden;\n  cursor: crosshair;\n  padding: 1px;\n  border: 1px solid lightgray;\n  background-clip: content-box;\n  -webkit-background-clip: content-box;\n}\n.smart-color-panel .color-palette:before, .smart-color-panel .color-palette:after {\n  width: 100%;\n  height: 100%;\n  content: " ";\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 0;\n}\n.smart-color-panel .color-palette:before {\n  background-image: linear-gradient(90deg, white, transparent);\n}\n.smart-color-panel .color-palette:after {\n  background-image: linear-gradient(transparent, black);\n}\n.smart-color-panel .color-controls-container {\n  display: block;\n  max-width: 100px;\n  overflow: hidden;\n}\n.smart-color-panel .color-palette-container {\n  width: 100%;\n  height: var(--smart-color-panel-palette-size);\n  display: flex;\n  flex-direction: row;\n}\n.smart-color-panel .preview-container {\n  width: 100%;\n  min-width: 100px;\n  /* or use variable thet defines the default width of the column*/\n  height: 100px;\n  background-color: white;\n  margin-bottom: 20px;\n  position: relative;\n  padding: 1px;\n  border: var(--smart-border-width) solid var(--smart-border);\n  background-clip: content-box;\n  -webkit-background-clip: content-box;\n}\n.smart-color-panel .preview-container-top,\n.smart-color-panel .preview-container-bottom {\n  width: 100%;\n  height: 50%;\n  display: block;\n  background-color: white;\n}\n.smart-color-panel .alpha-channel-container {\n  flex-direction: row;\n  width: 100%;\n  align-items: center;\n  align-content: space-around;\n  margin-top: 5px;\n  display: none;\n}\n.smart-color-panel .alpha-channel-container label {\n  width: 48px;\n}\n.smart-color-panel .alpha-channel-scale {\n  width: var(--smart-color-panel-palette-size);\n  height: 20px;\n  margin-top: 15px;\n  margin-bottom: 15px;\n  position: relative;\n  border: var(--smart-border-width) solid var(--smart-border);\n  margin-right: 20px;\n}\n.smart-color-panel .alpha-channel-scale:before, .smart-color-panel .alpha-channel-scale:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  content: " ";\n}\n.smart-color-panel .alpha-channel-scale:before {\n  background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);\n  background-position: 0px 6px, 8px 14px;\n  background-size: 16px 16px;\n}\n.smart-color-panel .alpha-channel-scale:after {\n  background-image: linear-gradient(90deg, var(--smart-color-panel-alpha-channel-color), transparent);\n  box-shadow: inset 1px -1px 0px 0px #ffffff, inset -1px 1px 0px 0px #ffffff;\n}\n.smart-color-panel .alpha-channel-thumb {\n  width: 10px;\n  height: 100%;\n  box-sizing: content-box;\n  border: 3px solid white;\n  border-top-width: 10px;\n  border-bottom-width: 10px;\n  position: absolute;\n  left: -3px;\n  top: -10px;\n  opacity: 0.8;\n  box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;\n  cursor: pointer;\n  z-index: 1;\n}\n.smart-color-panel .buttons-container {\n  display: none;\n  flex-direction: row;\n  justify-content: flex-end;\n  padding: 10px 0 0 0;\n}\n.smart-color-panel .buttons-container smart-button {\n  width: 100px;\n}\n.smart-color-panel .buttons-container smart-button:last-of-type {\n  margin-left: 20px;\n}\n.smart-color-panel .gradient-background {\n  background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);\n  background-position: 0px 6px, 8px 14px;\n  background-size: 16px 16px;\n}\n.smart-color-panel .user-color-container {\n  width: var(--smart-color-panel-grid-mode-item-size);\n  height: var(--smart-color-panel-grid-mode-item-size);\n  background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);\n  background-position: 0px 5px, 5px 10px;\n  background-size: 10px 10px;\n}\n.smart-color-panel .material-grid-samples-container {\n  display: grid;\n  grid-template-columns: 80px repeat(14, auto);\n}\n.smart-color-panel .button-custom-color {\n  margin: 5px 0px 5px 0px;\n}\n.smart-color-panel .color-sample {\n  width: var(--smart-color-panel-grid-mode-item-size);\n  height: var(--smart-color-panel-grid-mode-item-size);\n  margin: var(--smart-color-panel-grid-mode-columns-gap);\n  box-sizing: border-box;\n  cursor: pointer;\n  border: var(--smart-border-width) solid rgba(0, 0, 0, 0.1);\n  background-clip: content-box;\n  -webkit-background-clip: content-box;\n  text-overflow: ellipsis;\n}\n.smart-color-panel .color-sample.user-color {\n  position: relative;\n  background-clip: padding-box;\n  -webkit-background-clip: padding-box;\n}\n.smart-color-panel .color-sample.user-color:before {\n  position: absolute;\n  content: "";\n  width: 100%;\n  height: 100%;\n  background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);\n  background-position: 0px 5px, 5px 10px;\n  background-size: 10px 10px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: -1;\n}\n.smart-color-panel .color-sample.selected {\n  border: 2px solid var(--smart-ui-state-color-selected);\n  padding: 1px;\n}\n.smart-color-panel .color-sample.empty {\n  visibility: hidden;\n}\n.smart-color-panel .color-sample.header, .smart-color-panel .color-sample.label-column {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  border-width: 0px;\n  pointer-events: none;\n  user-select: none;\n}\n.smart-color-panel .color-sample.label-column {\n  width: 100%;\n  justify-content: flex-start;\n}\n.smart-color-panel .color-sample.color-sample-column, .smart-color-panel .color-sample.color-sample-row {\n  width: 16px;\n  /*to be calculated dinamically*/\n  height: 16px;\n  /*to be calculated dinamically*/\n  border: 2px solid rgba(0, 0, 0, 0.2);\n  padding: 1px;\n  background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px);\n}\n.smart-color-panel .color-sample[transparent] {\n  position: relative;\n}\n.smart-color-panel .color-sample[transparent]:after {\n  content: "";\n  border: 1px solid red;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg);\n  position: absolute;\n  width: 150%;\n  border-radius: 5px;\n}\n.smart-color-panel .user-color.empty {\n  background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px);\n  background-origin: content-box;\n  border-color: lightgray;\n}\n.smart-color-panel .default-samples-container div {\n  display: grid;\n  grid-template-columns: repeat(10, auto);\n  justify-items: center;\n}\n.smart-color-panel .default-samples-container .theme-shades-box {\n  margin-top: var(--smart-color-panel-default-mode-sections-gap);\n  margin-bottom: var(--smart-color-panel-default-mode-sections-gap);\n}\n.smart-color-panel .default-samples-container .theme-colors-label,\n.smart-color-panel .default-samples-container .standard-colors-label {\n  display: block;\n  font-weight: 600;\n  margin-left: 2px;\n  margin-top: var(--smart-color-panel-default-mode-sections-gap);\n  margin-bottom: var(--smart-color-panel-default-mode-sections-gap);\n  margin-bottom: calc(var(--smart-color-panel-default-mode-sections-gap) / 2);\n}\n.smart-color-panel .hex-mode-resize-trigger {\n  visibility: hidden;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.smart-color-panel[edit-alpha-channel] .alpha-channel-container {\n  display: flex;\n}\n.smart-color-panel[enable-custom-colors] .button-custom-color,\n.smart-color-panel[enable-custom-colors] .user-samples-container {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.smart-color-panel[enable-custom-colors]:not([display-mode=palette]):not([display-mdoe=radial]) .custom-color-selection .palette-mode-container {\n  display: block;\n}\n.smart-color-panel:not([display-mode=radial]) .canvas-radial {\n  display: none;\n}\n.smart-color-panel[display-mode=hexagonal] .brightness-scale, .smart-color-panel[display-mode=radial] .brightness-scale {\n  display: block;\n  max-width: 100px;\n  height: var(--smart-color-panel-palette-size);\n  background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);\n  /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */\n  width: 20px;\n  margin-left: 15px;\n  margin-right: 15px;\n  position: relative;\n  padding: 1px;\n  border: var(--smart-border-width) solid var(--smart-border);\n  background-clip: content-box;\n  -webkit-background-clip: content-box;\n}\n.smart-color-panel[display-mode=hexagonal] .brightness-scale-thumb, .smart-color-panel[display-mode=radial] .brightness-scale-thumb {\n  width: 100%;\n  height: 10px;\n  box-sizing: content-box;\n  border: 3px solid white;\n  border-left-width: 10px;\n  border-right-width: 10px;\n  position: absolute;\n  left: -10px;\n  top: -3px;\n  box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;\n  opacity: 0.8;\n  cursor: pointer;\n}\n.smart-color-panel[display-mode=hexagonal] .alpha-channel-scale {\n  width: var(--smart-color-panel-palette-width);\n}\n.smart-color-panel[display-mode=hexagonal] .brightness-scale {\n  display: block;\n  height: var(--smart-color-panel-palette-height);\n  background-image: linear-gradient(white, black);\n}\n.smart-color-panel[display-mode=hexagonal] .selected {\n  stroke: white;\n  stroke-width: 4px;\n}\n.smart-color-panel[display-mode=hexagonal] .color-palette-container {\n  height: var(--smart-color-panel-palette-height);\n}\n.smart-color-panel[display-mode=hexagonal] .palette-mode-container {\n  display: block;\n}\n.smart-color-panel[display-mode=hexagonal] .color-palette-hexagonal {\n  display: block;\n}\n.smart-color-panel[display-mode=radial] .hue-scale {\n  display: none;\n}\n.smart-color-panel[display-mode=radial] .brightness-scale {\n  background-image: linear-gradient(white, black);\n}\n.smart-color-panel[display-mode=radial] .color-palette-radial {\n  width: var(--smart-color-panel-palette-size);\n  height: var(--smart-color-panel-palette-size);\n  display: block;\n  position: relative;\n  overflow: hidden;\n  cursor: crosshair;\n  padding: 1px;\n  border: 1px solid lightgray;\n  background-clip: content-box;\n  -webkit-background-clip: content-box;\n  background: conic-gradient(from 90deg, red, yellow, lime, aqua, blue, magenta, red) rgb(255, 0, 90);\n  border-radius: 50%;\n}\n.smart-color-panel[display-mode=radial] .color-palette-radial:after {\n  width: 100%;\n  height: 100%;\n  content: " ";\n  display: block;\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  z-index: 0;\n  background: black;\n  opacity: var(--smart-color-panel-brightness);\n  border-radius: 50%;\n}\n.smart-color-panel[display-mode=radial] .color-palette-radial-thumb {\n  width: 0px;\n  height: 0px;\n  position: absolute;\n  z-index: 10;\n  pointer-events: none;\n  left: 50%;\n  top: 50%;\n}\n.smart-color-panel[display-mode=radial] .color-palette-radial-thumb:after {\n  content: " ";\n  position: absolute;\n  left: -14px;\n  top: -14px;\n  width: 16px;\n  height: 16px;\n  border: 5px solid white;\n  border-radius: 50%;\n  box-shadow: var(--smart-elevation-2);\n}\n.smart-color-panel[display-mode=radial] .white-radial-gradient {\n  z-index: 2;\n  width: var(--smart-color-panel-palette-size);\n  height: var(--smart-color-panel-palette-size);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  background-image: radial-gradient(circle, white, transparent);\n}\n.smart-color-panel[display-mode=radial] .palette-mode-container {\n  display: block;\n}\n.smart-color-panel[display-mode=radial] canvas {\n  transform: rotate(-180deg);\n  transform-origin: center;\n}\n.smart-color-panel[display-mode=radial][inverted] .color-palette-radial:after {\n  background: white;\n}\n.smart-color-panel[display-mode=radial][inverted] .white-radial-gradient {\n  background: radial-gradient(black, transparent);\n}\n.smart-color-panel[display-mode=spectrumGrid] .spectrum-grid-samples-container {\n  display: block;\n}\n.smart-color-panel[display-mode=default] .default-samples-container {\n  display: block;\n}\n.smart-color-panel[display-mode=palette] .palette-mode-container {\n  display: block;\n}\n.smart-color-panel[display-mode=palette] .color-palette {\n  display: block;\n}\n.smart-color-panel[display-mode=materialGrid] .color-palette {\n  display: block;\n}\n.smart-color-panel[apply-value-mode=useButtons] .buttons-container {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\n.smart-color-panel .palette-mode-container,\n.smart-color-panel .spectrum-grid-samples-container,\n.smart-color-panel .color-palette-hexagonal,\n.smart-color-panel .custom-color-selection .grid-mode-container,\n.smart-color-panel .button-custom-color,\n.smart-color-panel .user-samples-container {\n  display: none;\n}\n.smart-color-panel[display-mode=default] .grid-samples-container,\n.smart-color-panel[display-mode=default] .palette-mode-container,\n.smart-color-panel[display-mode=default] .material-grid-samples-container {\n  display: none;\n}\n.smart-color-panel[display-mode=grid] .palette-mode-container,\n.smart-color-panel[display-mode=grid] .material-grid-samples-container,\n.smart-color-panel[display-mode=grid] .default-samples-container {\n  display: none;\n}\n.smart-color-panel[display-mode=spectrumGrid] .palette-mode-container,\n.smart-color-panel[display-mode=spectrumGrid] .grid-samples-container,\n.smart-color-panel[display-mode=spectrumGrid] .material-grid-samples-container,\n.smart-color-panel[display-mode=spectrumGrid] .default-samples-container {\n  display: none;\n}\n.smart-color-panel[display-mode=materialGrid] .palette-mode-container,\n.smart-color-panel[display-mode=materialGrid] .grid-samples-container,\n.smart-color-panel[display-mode=materialGrid] .default-samples-container {\n  display: none;\n}\n.smart-color-panel[display-mode=hexagonal] .grid-samples-container,\n.smart-color-panel[display-mode=hexagonal] .spectrum-grid-samples-container,\n.smart-color-panel[display-mode=hexagonal] .color-palette,\n.smart-color-panel[display-mode=hexagonal] .hue-scale,\n.smart-color-panel[display-mode=hexagonal] .default-samples-container {\n  display: none;\n}\n.smart-color-panel[display-mode=palette] .color-palette-radial,\n.smart-color-panel[display-mode=palette] .grid-mode-container {\n  display: none;\n}\n.smart-color-panel[display-mode=radial] .color-palette,\n.smart-color-panel[display-mode=radial] .grid-mode-container {\n  display: none;\n}\n.smart-color-panel[enable-custom-colors][display-mode=hexagonal] .button-custom-color,\n.smart-color-panel[enable-custom-colors][display-mode=hexagonal] .user-samples-container {\n  display: none;\n}\n.smart-color-panel[hide-preview-container] .preview-container {\n  display: none;\n}\n.smart-color-panel[hide-alpha-editor] .a-channel {\n  display: none;\n}\n.smart-color-panel[hide-r-g-b-editor] .r-channel,\n.smart-color-panel[hide-r-g-b-editor] .g-channel,\n.smart-color-panel[hide-r-g-b-editor] .b-channel {\n  display: none;\n}\n.smart-color-panel[hide-h-e-x-editor] .hex {\n  display: none;\n}\n\n/* smart-color-panel */\nsmart-color-panel[right-to-left] .grid-mode-container,\nsmart-color-panel[right-to-left] .color-palette-container,\nsmart-color-panel[right-to-left] .alpha-channel-container {\n  direction: rtl;\n}\nsmart-color-panel[right-to-left] .alpha-channel-scale {\n  margin: 0 0 0 20px;\n}\nsmart-color-panel[right-to-left] .alpha-channel-scale:after {\n  background-image: linear-gradient(90deg, transparent, var(--smart-color-panel-alpha-channel-color));\n}\nsmart-color-panel[right-to-left] .buttons-container {\n  flex-direction: row-reverse;\n}\nsmart-color-panel[right-to-left] .buttons-container smart-button:last-of-type {\n  margin: 0 0 0 20px;\n}',""]);const s=i},2434:(e,t,n)=>{"use strict";n.d(t,{A:()=>s});var r=n(1601),o=n.n(r),a=n(6314),i=n.n(a)()(o());i.push([e.id,'/* all elements */\nsmart-accordion,\nsmart-button,\nsmart-toggle-button,\nsmart-repeat-button,\nsmart-switch-button,\nsmart-slider,\nsmart-led,\nsmart-tank,\nsmart-check-box,\nsmart-calendar,\nsmart-carousel,\nsmart-card,\nsmart-radio-button,\nsmart-progress-bar,\nsmart-circular-progress-bar,\nsmart-scroll-bar,\nsmart-gauge,\nsmart-grid,\nsmart-numeric-text-box,\nsmart-list-box,\nsmart-combo-box,\nsmart-docking-layout,\nsmart-drop-down-list,\nsmart-drop-down-button,\nsmart-multi-split-button,\nsmart-power-button,\nsmart-text-box,\nsmart-multiline-text-box,\nsmart-password-text-box,\nsmart-masked-text-box,\nsmart-tabs,\nsmart-date-time-picker,\nsmart-array,\nsmart-time-picker,\nsmart-menu,\nsmart-list-menu,\nsmart-window,\nsmart-alert-window,\nsmart-prompt-window,\nsmart-multiline-prompt-window,\nsmart-progress-window,\nsmart-tabs-window,\nsmart-dialog-window,\nsmart-pager,\nsmart-progress-window,\nsmart-wait-window,\nsmart-splitter,\nsmart-tree,\nsmart-filter-panel,\nsmart-breadcrumb,\nsmart-color-panel,\nsmart-color-picker,\nsmart-sort-panel,\nsmart-group-panel,\nsmart-column-panel,\nsmart-multi-column-filter-panel,\nsmart-query-builder,\nsmart-card-view,\nsmart-tooltip,\nsmart-layout,\nsmart-path,\nsmart-kanban,\nsmart-gantt-chart,\nsmart-sheduler,\nsmart-pivot-panel {\n    padding: 0px;\n    margin: 0px;\n    overflow: hidden;\n    display: block;\n}\n\n.smart-element {\n    outline: none;\n    box-sizing: border-box;\n    font-family: var(--smart-font-family);\n    font-size: var(--smart-font-size);\n    font-weight: var(--smart-font-weight);\n    /* Apple iOS specific browser CSS variable used for area highlighting on click. Reference link for details:\n        https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5 */\n    -webkit-tap-highlight-color: transparent;\n    background: var(--smart-background);\n    color: var(--smart-background-color);\n}\n\n.smart-root {\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n}\n\nsmart-button[disabled],\nsmart-calendar[disabled],\nsmart-combo-box[disabled],\nsmart-chip[disabled],\nsmart-toggle-button[disabled],\nsmart-repeat-button[disabled],\nsmart-switch-button[disabled],\nsmart-slider[disabled],\nsmart-led[disabled],\nsmart-tank[disabled],\nsmart-check-box[disabled],\nsmart-radio-button[disabled],\nsmart-progress-bar[disabled],\nsmart-circular-progress-bar[disabled],\nsmart-gauge[disabled],\nsmart-grid[disabled],\nsmart-numeric-text-box[disabled],\nsmart-list-item[disabled],\nsmart-list-box[disabled],\nsmart-drop-down-list[disabled],\nsmart-drop-down-button[disabled],\nsmart-multi-split-button[disabled],\nsmart-scroll-bar[disabled],\nsmart-power-button[disabled],\nsmart-text-box[disabled],\nsmart-multiline-text-box[disabled],\nsmart-password-text-box[disabled],\nsmart-tab[disabled],\nsmart-tabs[disabled],\nsmart-time-picker[disabled],\nsmart-menu-item[disabled],\nsmart-menu-items-group[disabled],\nsmart-menu[disabled],\nsmart-list-menu[disabled],\nsmart-window[disabled],\nsmart-dialog-window[disabled],\nsmart-progress-window[disabled],\nsmart-wait-window[disabled],\nsmart-alert-window[disabled],\nsmart-prompt-window[disabled],\nsmart-card[disabled],\nsmart-multiline-prompt-window[disabled],\nsmart-splitter[disabled],\nsmart-tree-item[disabled]>.smart-tree-item-label-container,\nsmart-tree-items-group[disabled]>.smart-tree-item-label-container,\nsmart-tree[disabled],\nsmart-docking-layout[disabled],\nsmart-filter-panel[disabled],\nsmart-breadcrumb[disabled],\nsmart-pager[disabled],\nsmart-pager .smart-pager-button[disabled],\nsmart-color-panel[disabled],\nsmart-color-picker[disabled],\nsmart-input[disabled],\nsmart-check-input[disabled],\