@sankhyalabs/ezui 2.6.0 → 2.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ez-combo-box.cjs.entry.js +1 -1
- package/dist/cjs/ez-list.cjs.entry.js +1 -1
- package/dist/cjs/ez-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-scroller.cjs.entry.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.css +30 -16
- package/dist/collection/components/ez-list/ez-list.css +117 -64
- package/dist/collection/components/ez-radio-button/ez-radio-button.js +1 -1
- package/dist/collection/components/ez-scroller/ez-scroller.css +51 -21
- package/dist/custom-elements/index.js +4 -4
- package/dist/esm/ez-combo-box.entry.js +1 -1
- package/dist/esm/ez-list.entry.js +1 -1
- package/dist/esm/ez-radio-button.entry.js +1 -1
- package/dist/esm/ez-scroller.entry.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-09e00375.entry.js +1 -0
- package/dist/ezui/p-5e3306bc.entry.js +1 -0
- package/dist/ezui/p-93bcc628.entry.js +1 -0
- package/dist/ezui/{p-590d9e91.entry.js → p-99182174.entry.js} +1 -1
- package/dist/types/components/ez-radio-button/ez-radio-button.d.ts +1 -1
- package/package.json +2 -2
- package/dist/ezui/p-3c1939f1.entry.js +0 -1
- package/dist/ezui/p-5cb4b43b.entry.js +0 -1
- package/dist/ezui/p-bd9d791c.entry.js +0 -1
|
@@ -9,7 +9,7 @@ const CSSVarsUtils = require('./CSSVarsUtils-af809e73.js');
|
|
|
9
9
|
require('./DialogType-aa435c52.js');
|
|
10
10
|
require('./CheckMode-ecb90b87.js');
|
|
11
11
|
|
|
12
|
-
const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-
|
|
12
|
+
const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
13
13
|
|
|
14
14
|
let EzComboBox = class {
|
|
15
15
|
constructor(hostRef) {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-8646c40d.js');
|
|
6
6
|
const core = require('@sankhyalabs/core');
|
|
7
7
|
|
|
8
|
-
const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-
|
|
8
|
+
const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--ez-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-list__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-list__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__scrollbar--width:var(--space--medium, 12px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{display:flex;align-items:center;border-top:1px dashed #fff;justify-content:space-between;background-color:#fff;flex:1;width:100%;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size)}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.item-content{display:flex;justify-content:flex-start;align-items:center;width:100%}.group-container .item-content{max-width:calc(100% - 41px)}.items-container .item-content{max-width:calc(100% - 100px)}.draggable-list{padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;color:var(--text-color);scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.draggable-list li{background-color:#fff;display:flex;height:32px;margin:var(--ez-list__item--margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color)}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.draggable-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb:vertical:hover,.draggable-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.draggable-list::-webkit-scrollbar-thumb:vertical:active,.draggable-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-list__icon--color);-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-name{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb:vertical:hover,.group-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.group-container::-webkit-scrollbar-thumb:vertical:active,.group-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb:vertical:hover,.items-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.items-container::-webkit-scrollbar-thumb:vertical:active,.items-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.group-overlay{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer;font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size)}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
|
|
9
9
|
|
|
10
10
|
let EzList = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -29,7 +29,7 @@ let EzRadioButton = class {
|
|
|
29
29
|
core.ElementIDUtils.addIDInfo(this.hostElement, 'input');
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
|
|
32
|
+
componentWillRender() {
|
|
33
33
|
this._options = this.options;
|
|
34
34
|
const optionsTags = this.hostElement.querySelectorAll("ez-radio-button-option");
|
|
35
35
|
if (optionsTags) {
|
|
@@ -12,7 +12,7 @@ var EzScrollDirection;
|
|
|
12
12
|
EzScrollDirection["BOTH"] = "both";
|
|
13
13
|
})(EzScrollDirection || (EzScrollDirection = {}));
|
|
14
14
|
|
|
15
|
-
const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);display:flex;cursor:grab;width:100%}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;flex-direction:column;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--
|
|
15
|
+
const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);display:flex;cursor:grab;width:100%}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;flex-direction:column;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--horizontal{flex-direction:row;overflow-y:hidden;overflow-x:hidden;padding-bottom:var(--ez-scroller__scrollbar--width);margin-bottom:calc(var(--ez-scroller__scrollbar--width) * -1)}.ez-scroller__container--horizontal:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover{overflow-x:overlay}.ez-scroller__container--horizontal.ez-scroller__container--no-overlay{padding-bottom:8px;margin-bottom:-8px}.ez-scroller__container--horizontal.ez-scroller__container--no-overlay:not(.ez-scroller__container--locked):hover{overflow-x:auto;padding-bottom:0px}.ez-scroller__container--vertical{overflow-y:hidden;overflow-x:hidden;padding-right:var(--ez-scroller__scrollbar--width);margin-right:calc(var(--ez-scroller__scrollbar--width) * -1)}.ez-scroller__container--vertical:not(.ez-scroller__container--no-overlay):not(.ez-scroller__container--locked):hover{overflow-y:overlay}.ez-scroller__container--vertical.ez-scroller__container--no-overlay{padding-right:8px;margin-right:-8px}.ez-scroller__container--vertical.ez-scroller__container--no-overlay:not(.ez-scroller__container--locked):hover{overflow-y:auto;padding-right:0px}.ez-scroller__container--both{overflow:auto}.ez-scroller__container::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background);width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:var(--ez-scroller__scrollbar--color-background);border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default);border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__shadow-start,.ez-scroller__shadow-end{display:flex;position:relative;z-index:0;background:var(--ez-scroller--box-shadow-color)}.ez-scroller__shadow-start--horizontal,.ez-scroller__shadow-end--horizontal{width:10px;min-height:100%;top:-13px}.ez-scroller__shadow-start--horizontal{box-shadow:var(--ez-scroller--box-shadow-color) -4px 0px 6px 10px;margin-right:-10px}.ez-scroller__shadow-end--horizontal{box-shadow:var(--ez-scroller--box-shadow-color) 4px 0px 6px 10px;margin-left:-10px}.ez-scroller__shadow-start--vertical,.ez-scroller__shadow-end--vertical{min-width:100%;height:10px;left:-13px}.ez-scroller__shadow-start--vertical{box-shadow:var(--ez-scroller--box-shadow-color) 0px -4px 6px 10px;margin-bottom:-10px}.ez-scroller__shadow-end--vertical{box-shadow:var(--ez-scroller--box-shadow-color) 0px 4px 6px 10px;margin-top:-10px}.ez-scroller__shadow--hidden{display:none}";
|
|
16
16
|
|
|
17
17
|
let EzScroller = class {
|
|
18
18
|
constructor(hostRef) {
|
|
@@ -70,16 +70,20 @@
|
|
|
70
70
|
--ez-combo-box--space--medium: var(--space--medium, 12px);
|
|
71
71
|
/*@doc Define um espaçamento pequeno entre elementos do componente.*/
|
|
72
72
|
--ez-combo-box--space--small: var(--space--small, 6px);
|
|
73
|
-
|
|
73
|
+
|
|
74
74
|
/* scrollbar */
|
|
75
75
|
/*@doc Define a cor da barra de rolagem do componente.*/
|
|
76
|
-
--ez-combo-
|
|
76
|
+
--ez-combo-box__scrollbar--color-default: var(--scrollbar--default, #626e82);
|
|
77
77
|
/*@doc Define a cor de fundo da barra de rolagem do componente.*/
|
|
78
|
-
--ez-combo-
|
|
78
|
+
--ez-combo-box__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
|
|
79
|
+
/*@doc Define a cor do hover na barra de rolagem do componente.*/
|
|
80
|
+
--ez-combo-box__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
|
|
81
|
+
/*@doc Define a cor do active na barra de rolagem do componente.*/
|
|
82
|
+
--ez-combo-box__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
|
|
79
83
|
/*@doc Define o raio da borda da barra de rolagem do componente.*/
|
|
80
|
-
--ez-combo-
|
|
84
|
+
--ez-combo-box__scrollbar--border-radius: var(--border--radius-small, 6px);
|
|
81
85
|
/*@doc Define a largura da barra de rolagem do componente.*/
|
|
82
|
-
--ez-combo-
|
|
86
|
+
--ez-combo-box__scrollbar--width: var(--space--medium, 12px);
|
|
83
87
|
|
|
84
88
|
/***************
|
|
85
89
|
host style
|
|
@@ -139,29 +143,39 @@ ez-icon {
|
|
|
139
143
|
gap: 3px;
|
|
140
144
|
|
|
141
145
|
/*public*/
|
|
142
|
-
scrollbar-color: var(--ez-combo-
|
|
146
|
+
scrollbar-color: var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background);
|
|
143
147
|
}
|
|
144
148
|
|
|
145
|
-
.list-options::-webkit-scrollbar
|
|
146
|
-
|
|
149
|
+
.list-options::-webkit-scrollbar {
|
|
150
|
+
/*public*/
|
|
151
|
+
background-color: var(--ez-combo-box__scrollbar--color-background);
|
|
152
|
+
width: var(--ez-combo-box__scrollbar--width);
|
|
153
|
+
max-width: var(--ez-combo-box__scrollbar--width);
|
|
154
|
+
min-width: var(--ez-combo-box__scrollbar--width);
|
|
155
|
+
}
|
|
147
156
|
|
|
157
|
+
.list-options::-webkit-scrollbar-track {
|
|
148
158
|
/*public*/
|
|
149
|
-
|
|
159
|
+
background-color: var(--ez-combo-box__scrollbar--color-background);
|
|
160
|
+
border-radius: var(--ez-combo-box__scrollbar--border-radius);
|
|
150
161
|
}
|
|
151
162
|
|
|
152
163
|
.list-options::-webkit-scrollbar-thumb {
|
|
153
164
|
/*public*/
|
|
154
|
-
background-color: var(--ez-combo-
|
|
155
|
-
border-radius: var(--ez-combo-
|
|
165
|
+
background-color: var(--ez-combo-box__scrollbar--color-default);
|
|
166
|
+
border-radius: var(--ez-combo-box__scrollbar--border-radius);
|
|
156
167
|
}
|
|
157
168
|
|
|
158
|
-
.list-options::-webkit-scrollbar
|
|
159
|
-
|
|
169
|
+
.list-options::-webkit-scrollbar-thumb:vertical:hover,
|
|
170
|
+
.list-options::-webkit-scrollbar-thumb:horizontal:hover {
|
|
171
|
+
/*public*/
|
|
172
|
+
background-color: var(--ez-combo-box__scrollbar--color-hover);
|
|
173
|
+
}
|
|
160
174
|
|
|
175
|
+
.list-options::-webkit-scrollbar-thumb:vertical:active,
|
|
176
|
+
.list-options::-webkit-scrollbar-thumb:horizontal:active {
|
|
161
177
|
/*public*/
|
|
162
|
-
|
|
163
|
-
max-width: var(--ez-combo-box__list-scrollbar--width);
|
|
164
|
-
min-width: var(--ez-combo-box__list-scrollbar--width);
|
|
178
|
+
background-color: var(--ez-combo-box__scrollbar--color-clicked);
|
|
165
179
|
}
|
|
166
180
|
|
|
167
181
|
.item {
|
|
@@ -61,36 +61,12 @@
|
|
|
61
61
|
|
|
62
62
|
/* @doc Define o tamanho do texto da área de transferência de grupos. */
|
|
63
63
|
--ez-list__group-overlay--font-size: var(--text--medium, 14px);
|
|
64
|
-
|
|
65
|
-
/*@doc Define o raio da borda da barra de rolagem do container de grupos.*/
|
|
66
|
-
--ez-list__group-container-scrollbar--border-radius: var(--border--radius-small, 6px);
|
|
67
|
-
|
|
68
|
-
/*@doc Define a largura da barra de rolagem do container de grupos.*/
|
|
69
|
-
--ez-list__group-container-scrollbar--width: var(--space--medium, 12px);
|
|
70
|
-
|
|
71
|
-
/*@doc Define a cor da barra de rolagem do container de grupos.*/
|
|
72
|
-
--ez-list__group-container-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
|
|
73
64
|
|
|
74
|
-
/*@doc Define a cor de fundo da barra de rolagem do container de grupos.*/
|
|
75
|
-
--ez-list__group-container-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
|
|
76
|
-
|
|
77
65
|
/* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
|
|
78
66
|
--ez-list__over--border--color: var(--color--primary, #008561);
|
|
79
67
|
|
|
80
68
|
/*@doc Define a altura do container para arrasto para última posição .*/
|
|
81
69
|
--ez-list__last-droppable-space--height: var(--space--small, 6px);
|
|
82
|
-
|
|
83
|
-
/*@doc Define o raio da borda da barra de rolagem do componente.*/
|
|
84
|
-
--ez-list__draggable-scrollbar--border-radius: var(--border--radius-small, 6px);
|
|
85
|
-
|
|
86
|
-
/*@doc Define a largura da barra de rolagem do componente.*/
|
|
87
|
-
--ez-list__draggable-scrollbar--width: var(--space--medium, 12px);
|
|
88
|
-
|
|
89
|
-
/*@doc Define a cor da barra de rolagem do componente.*/
|
|
90
|
-
--ez-list__draggable-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
|
|
91
|
-
|
|
92
|
-
/*@doc Define a cor de fundo da barra de rolagem do componente.*/
|
|
93
|
-
--ez-list__draggable-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
|
|
94
70
|
|
|
95
71
|
/*@doc Define o espaçamento do container de itens arrastáveis .*/
|
|
96
72
|
--ez-list__draggable-list--padding-bottom: var(--space--small, 6px);
|
|
@@ -98,10 +74,26 @@
|
|
|
98
74
|
/* @doc Define a imagem do ícone de drag. */
|
|
99
75
|
--ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z"/></svg>');
|
|
100
76
|
|
|
77
|
+
/* scrollbar */
|
|
78
|
+
/*@doc Define a cor da barra de rolagem do componente.*/
|
|
79
|
+
--ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);
|
|
80
|
+
/*@doc Define a cor de fundo da barra de rolagem do componente.*/
|
|
81
|
+
--ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
|
|
82
|
+
/*@doc Define a cor do hover na barra de rolagem do componente.*/
|
|
83
|
+
--ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
|
|
84
|
+
/*@doc Define a cor do active na barra de rolagem do componente.*/
|
|
85
|
+
--ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
|
|
86
|
+
/*@doc Define o raio da borda da barra de rolagem do componente.*/
|
|
87
|
+
--ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);
|
|
88
|
+
/*@doc Define a largura da barra de rolagem do componente.*/
|
|
89
|
+
--ez-list__scrollbar--width: var(--space--medium, 12px);
|
|
90
|
+
|
|
101
91
|
max-height: 100%;
|
|
102
92
|
width: 100%;
|
|
103
93
|
background-color: #fff;
|
|
104
94
|
display: flex;
|
|
95
|
+
|
|
96
|
+
/*public*/
|
|
105
97
|
z-index: var(--ez-list__host--z-index);
|
|
106
98
|
}
|
|
107
99
|
|
|
@@ -115,10 +107,12 @@ p {
|
|
|
115
107
|
border-top: 1px dashed #fff;
|
|
116
108
|
justify-content: space-between;
|
|
117
109
|
background-color: #fff;
|
|
118
|
-
font-family: var(--ez-list__item--font-family);
|
|
119
|
-
font-size: var(--ez-list__item--font-size);
|
|
120
110
|
flex: 1;
|
|
121
111
|
width: 100%;
|
|
112
|
+
|
|
113
|
+
/*public*/
|
|
114
|
+
font-family: var(--ez-list__item--font-family);
|
|
115
|
+
font-size: var(--ez-list__item--font-size);
|
|
122
116
|
}
|
|
123
117
|
|
|
124
118
|
.dragging {
|
|
@@ -133,6 +127,8 @@ p {
|
|
|
133
127
|
|
|
134
128
|
.selectable {
|
|
135
129
|
cursor: pointer;
|
|
130
|
+
|
|
131
|
+
/*public*/
|
|
136
132
|
padding-right: var(--ez-list__selectable--padding-right);
|
|
137
133
|
padding-left: var(--ez-list__selectable--padding-left);
|
|
138
134
|
}
|
|
@@ -157,7 +153,6 @@ p {
|
|
|
157
153
|
}
|
|
158
154
|
|
|
159
155
|
.draggable-list {
|
|
160
|
-
color: var(--text-color);
|
|
161
156
|
padding: 0;
|
|
162
157
|
margin: 0;
|
|
163
158
|
width: 100%;
|
|
@@ -165,51 +160,72 @@ p {
|
|
|
165
160
|
scrollbar-width: thin;
|
|
166
161
|
|
|
167
162
|
/*public*/
|
|
168
|
-
|
|
163
|
+
color: var(--text-color);
|
|
164
|
+
scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
|
|
169
165
|
}
|
|
170
166
|
|
|
171
167
|
.draggable-list li {
|
|
172
168
|
background-color: #fff;
|
|
173
169
|
display: flex;
|
|
170
|
+
height: 32px;
|
|
171
|
+
|
|
172
|
+
/*public*/
|
|
174
173
|
margin: var(--ez-list__item--margin);
|
|
175
174
|
font-family: var(--ez-list__item--font-family);
|
|
176
175
|
font-size: var(--ez-list__item--font-size);
|
|
177
176
|
color: var(--ez-list__item--color);
|
|
178
|
-
height: 32px;
|
|
179
177
|
}
|
|
180
178
|
|
|
181
179
|
.over {
|
|
180
|
+
/*public*/
|
|
182
181
|
border-top: 1px dashed var(--ez-list__over--border--color);
|
|
183
182
|
}
|
|
184
183
|
|
|
185
184
|
.last-droppable-space {
|
|
185
|
+
/*public*/
|
|
186
186
|
height: var(--ez-list__last-droppable-space--height);
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
.draggable-selected {
|
|
190
|
+
/*public*/
|
|
190
191
|
background-color: var(--background--strong) !important;
|
|
191
192
|
}
|
|
192
193
|
|
|
193
194
|
.draggable-selected div:hover {
|
|
195
|
+
/*public*/
|
|
194
196
|
background-color: var(--background--strong) !important;
|
|
195
197
|
}
|
|
196
198
|
|
|
199
|
+
.draggable-list::-webkit-scrollbar {
|
|
200
|
+
/*public*/
|
|
201
|
+
background-color: var(--ez-list__scrollbar--color-background);
|
|
202
|
+
width: var(--ez-list__scrollbar--width);
|
|
203
|
+
max-width: var(--ez-list__scrollbar--width);
|
|
204
|
+
min-width: var(--ez-list__scrollbar--width);
|
|
205
|
+
}
|
|
197
206
|
|
|
198
|
-
/* Precisamos dos tokens do scrollbar */
|
|
199
207
|
.draggable-list::-webkit-scrollbar-track {
|
|
200
|
-
|
|
208
|
+
/*public*/
|
|
209
|
+
background-color: var(--ez-list__scrollbar--color-background);
|
|
210
|
+
border-radius: var(--ez-list__scrollbar--border-radius);
|
|
201
211
|
}
|
|
202
212
|
|
|
203
213
|
.draggable-list::-webkit-scrollbar-thumb {
|
|
204
|
-
|
|
205
|
-
|
|
214
|
+
/*public*/
|
|
215
|
+
background-color: var(--ez-list__scrollbar--color-default);
|
|
216
|
+
border-radius: var(--ez-list__scrollbar--border-radius);
|
|
206
217
|
}
|
|
207
218
|
|
|
208
|
-
.draggable-list::-webkit-scrollbar
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
219
|
+
.draggable-list::-webkit-scrollbar-thumb:vertical:hover,
|
|
220
|
+
.draggable-list::-webkit-scrollbar-thumb:horizontal:hover {
|
|
221
|
+
/*public*/
|
|
222
|
+
background-color: var(--ez-list__scrollbar--color-hover);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.draggable-list::-webkit-scrollbar-thumb:vertical:active,
|
|
226
|
+
.draggable-list::-webkit-scrollbar-thumb:horizontal:active {
|
|
227
|
+
/*public*/
|
|
228
|
+
background-color: var(--ez-list__scrollbar--color-clicked);
|
|
213
229
|
}
|
|
214
230
|
|
|
215
231
|
.draggable-icon {
|
|
@@ -223,9 +239,11 @@ p {
|
|
|
223
239
|
.draggable-icon::after {
|
|
224
240
|
content: '';
|
|
225
241
|
display: flex;
|
|
226
|
-
background-color: var(--ez-list__icon--color);
|
|
227
242
|
width: 18px;
|
|
228
243
|
height: 18px;
|
|
244
|
+
|
|
245
|
+
/*public*/
|
|
246
|
+
background-color: var(--ez-list__icon--color);
|
|
229
247
|
-webkit-mask-image: var(--ez-list__draggable-icon--image);
|
|
230
248
|
mask-image: var(--ez-list__draggable-icon--image);
|
|
231
249
|
}
|
|
@@ -254,18 +272,20 @@ p {
|
|
|
254
272
|
scrollbar-width: thin;
|
|
255
273
|
|
|
256
274
|
/*public*/
|
|
257
|
-
scrollbar-color: var(--ez-
|
|
275
|
+
scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
|
|
258
276
|
}
|
|
259
277
|
|
|
260
278
|
.group-name {
|
|
261
|
-
font-family: var(--ez-list__group--font-family);
|
|
262
|
-
font-size: var(--ez-list__group--font-size);
|
|
263
|
-
font-weight: var(--ez-list__group--font-weight);
|
|
264
|
-
padding-bottom: var(--ez-list__group--padding-bottom);
|
|
265
279
|
-webkit-user-select: none;
|
|
266
280
|
-moz-user-select: -moz-none;
|
|
267
281
|
-ms-user-select: none;
|
|
268
282
|
user-select: none;
|
|
283
|
+
|
|
284
|
+
/*public*/
|
|
285
|
+
font-family: var(--ez-list__group--font-family);
|
|
286
|
+
font-size: var(--ez-list__group--font-size);
|
|
287
|
+
font-weight: var(--ez-list__group--font-weight);
|
|
288
|
+
padding-bottom: var(--ez-list__group--padding-bottom);
|
|
269
289
|
}
|
|
270
290
|
|
|
271
291
|
.group {
|
|
@@ -273,22 +293,36 @@ p {
|
|
|
273
293
|
flex-direction: column;
|
|
274
294
|
}
|
|
275
295
|
|
|
296
|
+
.group-container::-webkit-scrollbar {
|
|
297
|
+
/*public*/
|
|
298
|
+
background-color: var(--ez-list__scrollbar--color-background);
|
|
299
|
+
width: var(--ez-list__scrollbar--width);
|
|
300
|
+
max-width: var(--ez-list__scrollbar--width);
|
|
301
|
+
min-width: var(--ez-list__scrollbar--width);
|
|
302
|
+
}
|
|
276
303
|
|
|
277
|
-
/* Precisamos dos tokens do scrollbar */
|
|
278
304
|
.group-container::-webkit-scrollbar-track {
|
|
279
|
-
|
|
305
|
+
/*public*/
|
|
306
|
+
background-color: var(--ez-list__scrollbar--color-background);
|
|
307
|
+
border-radius: var(--ez-list__scrollbar--border-radius);
|
|
280
308
|
}
|
|
281
309
|
|
|
282
310
|
.group-container::-webkit-scrollbar-thumb {
|
|
283
|
-
|
|
284
|
-
|
|
311
|
+
/*public*/
|
|
312
|
+
background-color: var(--ez-list__scrollbar--color-default);
|
|
313
|
+
border-radius: var(--ez-list__scrollbar--border-radius);
|
|
285
314
|
}
|
|
286
315
|
|
|
287
|
-
.group-container::-webkit-scrollbar
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
316
|
+
.group-container::-webkit-scrollbar-thumb:vertical:hover,
|
|
317
|
+
.group-container::-webkit-scrollbar-thumb:horizontal:hover {
|
|
318
|
+
/*public*/
|
|
319
|
+
background-color: var(--ez-list__scrollbar--color-hover);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.group-container::-webkit-scrollbar-thumb:vertical:active,
|
|
323
|
+
.group-container::-webkit-scrollbar-thumb:horizontal:active {
|
|
324
|
+
/*public*/
|
|
325
|
+
background-color: var(--ez-list__scrollbar--color-clicked);
|
|
292
326
|
}
|
|
293
327
|
|
|
294
328
|
.section-container {
|
|
@@ -305,7 +339,7 @@ p {
|
|
|
305
339
|
scrollbar-width: thin;
|
|
306
340
|
|
|
307
341
|
/*public*/
|
|
308
|
-
scrollbar-color: var(--ez-
|
|
342
|
+
scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
|
|
309
343
|
}
|
|
310
344
|
|
|
311
345
|
.group-items-container {
|
|
@@ -315,25 +349,39 @@ p {
|
|
|
315
349
|
outline: none;
|
|
316
350
|
}
|
|
317
351
|
|
|
352
|
+
.items-container::-webkit-scrollbar {
|
|
353
|
+
/*public*/
|
|
354
|
+
background-color: var(--ez-list__scrollbar--color-background);
|
|
355
|
+
width: var(--ez-list__scrollbar--width);
|
|
356
|
+
max-width: var(--ez-list__scrollbar--width);
|
|
357
|
+
min-width: var(--ez-list__scrollbar--width);
|
|
358
|
+
}
|
|
359
|
+
|
|
318
360
|
.items-container::-webkit-scrollbar-track {
|
|
319
|
-
|
|
361
|
+
/*public*/
|
|
362
|
+
background-color: var(--ez-list__scrollbar--color-background);
|
|
363
|
+
border-radius: var(--ez-list__scrollbar--border-radius);
|
|
320
364
|
}
|
|
321
365
|
|
|
322
366
|
.items-container::-webkit-scrollbar-thumb {
|
|
323
|
-
|
|
324
|
-
|
|
367
|
+
/*public*/
|
|
368
|
+
background-color: var(--ez-list__scrollbar--color-default);
|
|
369
|
+
border-radius: var(--ez-list__scrollbar--border-radius);
|
|
325
370
|
}
|
|
326
371
|
|
|
327
|
-
.items-container::-webkit-scrollbar
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
372
|
+
.items-container::-webkit-scrollbar-thumb:vertical:hover,
|
|
373
|
+
.items-container::-webkit-scrollbar-thumb:horizontal:hover {
|
|
374
|
+
/*public*/
|
|
375
|
+
background-color: var(--ez-list__scrollbar--color-hover);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.items-container::-webkit-scrollbar-thumb:vertical:active,
|
|
379
|
+
.items-container::-webkit-scrollbar-thumb:horizontal:active {
|
|
380
|
+
/*public*/
|
|
381
|
+
background-color: var(--ez-list__scrollbar--color-clicked);
|
|
332
382
|
}
|
|
333
383
|
|
|
334
384
|
.group-overlay {
|
|
335
|
-
font-family: var(--ez-list__group-overlay--font-family);
|
|
336
|
-
font-size: var(--ez-list__group-overlay--font-size);
|
|
337
385
|
background: rgba(226, 244, 239, 0.8);
|
|
338
386
|
border: 1px solid #008561;
|
|
339
387
|
border-radius: 8px;
|
|
@@ -347,6 +395,10 @@ p {
|
|
|
347
395
|
z-index: 2;
|
|
348
396
|
margin: 0;
|
|
349
397
|
cursor: pointer;
|
|
398
|
+
|
|
399
|
+
/*public*/
|
|
400
|
+
font-family: var(--ez-list__group-overlay--font-family);
|
|
401
|
+
font-size: var(--ez-list__group-overlay--font-size);
|
|
350
402
|
}
|
|
351
403
|
|
|
352
404
|
.presetedHeight {
|
|
@@ -364,6 +416,7 @@ p {
|
|
|
364
416
|
}
|
|
365
417
|
|
|
366
418
|
.selected-item {
|
|
419
|
+
/*public*/
|
|
367
420
|
background: var(--ez-list__selected-item--background-color);
|
|
368
421
|
border-radius: var(--ez-list__selected-item--border-radius);
|
|
369
422
|
}
|
|
@@ -20,7 +20,7 @@ export class EzRadioButton {
|
|
|
20
20
|
ElementIDUtils.addIDInfo(this.hostElement, 'input');
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
|
|
23
|
+
componentWillRender() {
|
|
24
24
|
this._options = this.options;
|
|
25
25
|
const optionsTags = this.hostElement.querySelectorAll("ez-radio-button-option");
|
|
26
26
|
if (optionsTags) {
|