@smart-webcomponents-angular/scrollbar 13.0.10 → 16.0.2

package/styles/smart.scrollbar.css

@@ -1,2 +1,2 @@
 smart-button,smart-repeat-button,smart-toggle-button{--smart-button-flat-color:var(--smart-background-color);text-align:center;display:inline-flex;vertical-align:middle;cursor:pointer;text-transform:var(--smart-button-text-transform);letter-spacing:.08929em;overflow:hidden;border-color:var(--smart-border);border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);border-width:var(--smart-border-width);border-style:solid;visibility:hidden;font-weight:500}smart-button.smart-element,smart-repeat-button.smart-element,smart-toggle-button.smart-element{display:inline-flex;visibility:inherit}smart-button button::-moz-focus-inner,smart-repeat-button button::-moz-focus-inner,smart-toggle-button button::-moz-focus-inner{border:0}smart-button.primary,smart-repeat-button.primary,smart-toggle-button.primary{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-primary);--smart-border:var(--smart-primary);--smart-border-rgb:var(--smart-primary-rgb);--smart-background-color:var(--smart-primary-color);--smart-ui-state-hover:var(--smart-primary);--smart-ui-state-border-hover:var(--smart-primary);--smart-ui-state-color-hover:var(--smart-primary-color);--smart-ui-state-active:var(--smart-primary);--smart-ui-state-border-active:var(--smart-primary);--smart-ui-state-color-active:var(--smart-primary-color);--smart-ui-state-focus:var(--smart-primary);--smart-ui-state-border-focus:var(--smart-primary);--smart-ui-state-color-focus:var(--smart-primary-color);--smart-button-flat-color:var(--smart-primary);--smart-button-outlined-color:var(--smart-primary);--smart-button-outlined-border:var(--smart-primary)}smart-button.secondary,smart-repeat-button.secondary,smart-toggle-button.secondary{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-secondary);--smart-border:var(--smart-secondary);--smart-border-rgb:var(--smart-secondary-rgb);--smart-background-color:var(--smart-secondary-color);--smart-ui-state-hover:var(--smart-secondary);--smart-ui-state-border-hover:var(--smart-secondary);--smart-ui-state-color-hover:var(--smart-secondary-color);--smart-ui-state-active:var(--smart-secondary);--smart-ui-state-border-active:var(--smart-secondary);--smart-ui-state-color-active:var(--smart-secondary-color);--smart-ui-state-focus:var(--smart-secondary);--smart-ui-state-border-focus:var(--smart-secondary);--smart-ui-state-color-focus:var(--smart-secondary-color);--smart-button-flat-color:var(--smart-secondary);--smart-button-outlined-color:var(--smart-secondary);--smart-button-outlined-border:var(--smart-secondary)}smart-button.success,smart-repeat-button.success,smart-toggle-button.success{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-success);--smart-border:var(--smart-success);--smart-border-rgb:var(--smart-success-rgb);--smart-background-color:var(--smart-success-color);--smart-ui-state-hover:var(--smart-success);--smart-ui-state-border-hover:var(--smart-success);--smart-ui-state-color-hover:var(--smart-success-color);--smart-ui-state-active:var(--smart-success);--smart-ui-state-border-active:var(--smart-success);--smart-ui-state-color-active:var(--smart-success-color);--smart-ui-state-focus:var(--smart-success);--smart-ui-state-border-focus:var(--smart-success);--smart-ui-state-color-focus:var(--smart-success-color);--smart-button-flat-color:var(--smart-success);--smart-button-outlined-color:var(--smart-success);--smart-button-outlined-border:var(--smart-success)}smart-button.error,smart-repeat-button.error,smart-toggle-button.error{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-error);--smart-border:var(--smart-error);--smart-border-rgb:var(--smart-error-rgb);--smart-background-color:var(--smart-error-color);--smart-ui-state-hover:var(--smart-error);--smart-ui-state-border-hover:var(--smart-error);--smart-ui-state-color-hover:var(--smart-error-color);--smart-ui-state-active:var(--smart-error);--smart-ui-state-border-active:var(--smart-error);--smart-ui-state-color-active:var(--smart-error-color);--smart-ui-state-focus:var(--smart-error);--smart-ui-state-border-focus:var(--smart-error);--smart-ui-state-color-focus:var(--smart-error-color);--smart-button-flat-color:var(--smart-error);--smart-button-outlined-color:var(--smart-error);--smart-button-outlined-border:var(--smart-error)}smart-button.info,smart-repeat-button.info,smart-toggle-button.info{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-info);--smart-border:var(--smart-info);--smart-border-rgb:var(--smart-info-rgb);--smart-background-color:var(--smart-info-color);--smart-ui-state-hover:var(--smart-info);--smart-ui-state-border-hover:var(--smart-info);--smart-ui-state-color-hover:var(--smart-info-color);--smart-ui-state-active:var(--smart-info);--smart-ui-state-border-active:var(--smart-info);--smart-ui-state-color-active:var(--smart-info-color);--smart-ui-state-focus:var(--smart-info);--smart-ui-state-border-focus:var(--smart-info);--smart-ui-state-color-focus:var(--smart-info-color);--smart-button-flat-color:var(--smart-info);--smart-button-outlined-color:var(--smart-info);--smart-button-outlined-border:var(--smart-info)}smart-button.warning,smart-repeat-button.warning,smart-toggle-button.warning{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-warning);--smart-border:var(--smart-warning);--smart-border-rgb:var(--smart-warning-rgb);--smart-background-color:var(--smart-warning-color);--smart-ui-state-hover:var(--smart-warning);--smart-ui-state-border-hover:var(--smart-warning);--smart-ui-state-color-hover:var(--smart-warning-color);--smart-ui-state-active:var(--smart-warning);--smart-ui-state-border-active:var(--smart-warning);--smart-ui-state-color-active:var(--smart-warning-color);--smart-ui-state-focus:var(--smart-warning);--smart-ui-state-border-focus:var(--smart-warning);--smart-ui-state-color-focus:var(--smart-warning-color);--smart-button-flat-color:var(--smart-warning);--smart-button-outlined-color:var(--smart-warning);--smart-button-outlined-border:var(--smart-warning)}smart-button.light,smart-repeat-button.light,smart-toggle-button.light{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-light);--smart-border:var(--smart-light);--smart-border-rgb:var(--smart-light-rgb);--smart-background-color:var(--smart-light-color);--smart-ui-state-hover:var(--smart-light);--smart-ui-state-border-hover:var(--smart-light);--smart-ui-state-color-hover:var(--smart-light-color);--smart-ui-state-active:var(--smart-light);--smart-ui-state-border-active:var(--smart-light);--smart-ui-state-color-active:var(--smart-light-color);--smart-ui-state-focus:var(--smart-light);--smart-ui-state-border-focus:var(--smart-light);--smart-ui-state-color-focus:var(--smart-light-color);--smart-button-flat-color:var(--smart-light);--smart-button-outlined-color:var(--smart-light);--smart-button-outlined-border:var(--smart-light)}smart-button.dark,smart-repeat-button.dark,smart-toggle-button.dark{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-dark);--smart-border:var(--smart-dark);--smart-border-rgb:var(--smart-dark-rgb);--smart-background-color:var(--smart-dark-color);--smart-ui-state-hover:var(--smart-dark);--smart-ui-state-border-hover:var(--smart-dark);--smart-ui-state-color-hover:var(--smart-dark-color);--smart-ui-state-active:var(--smart-dark);--smart-ui-state-border-active:var(--smart-dark);--smart-ui-state-color-active:var(--smart-dark-color);--smart-ui-state-focus:var(--smart-dark);--smart-ui-state-border-focus:var(--smart-dark);--smart-ui-state-color-focus:var(--smart-dark-color);--smart-button-flat-color:var(--smart-dark);--smart-button-outlined-color:var(--smart-dark);--smart-button-outlined-border:var(--smart-dark)}smart-button[hover],smart-repeat-button[hover],smart-toggle-button[hover]{color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-border-hover);background-color:var(--smart-ui-state-hover);transition:background-color .1s linear,box-shadow 280ms ease-in-out;opacity:var(--smart-button-opacity-hover)}smart-button[focus],smart-repeat-button[focus],smart-toggle-button[focus]{color:var(--smart-ui-state-color-focus);border-color:var(--smart-ui-state-border-focus);background-color:var(--smart-ui-state-focus);opacity:var(--smart-button-opacity-focus)}smart-button[active],smart-repeat-button[active],smart-toggle-button[active]{color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active);transition:background-color .1s linear,box-shadow 280ms ease-in-out;opacity:var(--smart-button-opacity-active)}smart-button[disabled],smart-repeat-button[disabled],smart-toggle-button[disabled]{color:var(--smart-disabled-color);border-color:var(--smart-disabled);background-color:var(--smart-disabled);cursor:default;--smart-background:var(--smart-disabled);--smart-border:var(--smart-disabled);--smart-background-color:var(--smart-disabled-color)}smart-button.large button,smart-repeat-button.large button,smart-toggle-button.large button{padding:var(--smart-button-large-padding);font-size:var(--smart-button-large-font-size)}smart-button.small button,smart-repeat-button.small button,smart-toggle-button.small button{padding:var(--smart-button-small-padding);font-size:var(--smart-button-small-font-size)}smart-button.very-small button,smart-repeat-button.very-small button,smart-toggle-button.very-small button{padding:var(--smart-button-very-small-padding);font-size:var(--smart-button-very-small-font-size)}smart-button.rounded,smart-repeat-button.rounded,smart-toggle-button.rounded{--smart-border-top-left-radius:50px;--smart-border-top-right-radius:50px;--smart-border-bottom-left-radius:50px;--smart-border-bottom-right-radius:50px;border-radius:var(--smart-border-bottom-left-radius)!important}smart-button.squared,smart-repeat-button.squared,smart-toggle-button.squared{--smart-border-top-left-radius:0;--smart-border-top-right-radius:0;--smart-border-bottom-left-radius:0;--smart-border-bottom-right-radius:0}smart-button.flat,smart-button.flat[active],smart-button.flat[hover],smart-repeat-button.flat,smart-repeat-button.flat[active],smart-repeat-button.flat[hover],smart-toggle-button.flat,smart-toggle-button.flat[active],smart-toggle-button.flat[hover]{color:var(--smart-button-flat-color);background:0 0;border-color:transparent}smart-button.outlined,smart-button.outlined[active],smart-button.outlined[hover],smart-repeat-button.outlined,smart-repeat-button.outlined[active],smart-repeat-button.outlined[hover],smart-toggle-button.outlined,smart-toggle-button.outlined[active],smart-toggle-button.outlined[hover]{color:var(--smart-button-outlined-color);border-color:var(--smart-button-outlined-border);background:0 0}smart-button.flat[focus],smart-repeat-button.flat[focus],smart-toggle-button.flat[focus]{border-color:var(--smart-ui-state-focus)}smart-button.flat[checked],smart-repeat-button.flat[checked],smart-toggle-button.flat[checked]{text-decoration:underline;background:var(--smart-ui-state-active)}smart-button.flat .smart-ripple,smart-repeat-button.flat .smart-ripple,smart-toggle-button.flat .smart-ripple{background-color:var(--smart-button-flat-color)}smart-button.outlined,smart-repeat-button.outlined,smart-toggle-button.outlined{border-width:calc(2 * var(--smart-border-width))}smart-button.outlined[focus],smart-repeat-button.outlined[focus],smart-toggle-button.outlined[focus]{color:var(--smart-button-outlined-color);border-color:var(--smart-ui-state-focus);background:0 0}smart-button.outlined[checked],smart-repeat-button.outlined[checked],smart-toggle-button.outlined[checked]{color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-active);background:var(--smart-ui-state-active)}smart-button.outlined .smart-ripple,smart-repeat-button.outlined .smart-ripple,smart-toggle-button.outlined .smart-ripple{background-color:var(--smart-button-outlined-color)}smart-button.outlined button.smart-button,smart-repeat-button.outlined button.smart-button,smart-toggle-button.outlined button.smart-button{border-radius:initial}smart-button.raised,smart-repeat-button.raised,smart-toggle-button.raised{box-shadow:var(--smart-elevation-2);transition:background-color .1s linear,box-shadow 280ms ease-in-out}smart-button.raised[hover],smart-repeat-button.raised[hover],smart-toggle-button.raised[hover]{box-shadow:var(--smart-elevation-4)}smart-button.raised button[active],smart-button.raised[active],smart-button.raised[checked],smart-repeat-button.raised button[active],smart-repeat-button.raised[active],smart-repeat-button.raised[checked],smart-toggle-button.raised button[active],smart-toggle-button.raised[active],smart-toggle-button.raised[checked]{box-shadow:var(--smart-elevation-8)}smart-button.raised[focus],smart-button.raised[focus]:not([checked]),smart-repeat-button.raised[focus],smart-repeat-button.raised[focus]:not([checked]),smart-toggle-button.raised[focus],smart-toggle-button.raised[focus]:not([checked]){box-shadow:var(--smart-elevation-6)}smart-button.floating,smart-repeat-button.floating,smart-toggle-button.floating{border-radius:50%;width:48px;height:48px;box-shadow:var(--smart-elevation-4);transition:background-color .1s linear,box-shadow 280ms ease-in-out}smart-button.floating[hover],smart-repeat-button.floating[hover],smart-toggle-button.floating[hover]{box-shadow:var(--smart-elevation-6)}smart-button.floating[active],smart-button.floating[checked],smart-repeat-button.floating[active],smart-repeat-button.floating[checked],smart-toggle-button.floating[active],smart-toggle-button.floating[checked]{box-shadow:var(--smart-elevation-12)}smart-button.floating[focus],smart-button.floating[focus]:not([checked]),smart-repeat-button.floating[focus],smart-repeat-button.floating[focus]:not([checked]),smart-toggle-button.floating[focus],smart-toggle-button.floating[focus]:not([checked]){box-shadow:var(--smart-elevation-6)}button.smart-button{position:relative;padding:var(--smart-button-padding);text-align:inherit;vertical-align:inherit;cursor:inherit;text-transform:inherit;font-weight:inherit;letter-spacing:inherit;background:inherit;color:inherit;border:none;-webkit-font-smoothing:antialiased;opacity:var(--smart-button-opacity);white-space:nowrap;border-radius:inherit}.smart-button .smart-ripple{background:var(--smart-background-color)}[smart-toggle-button] .smart-container,smart-toggle-button .smart-container{font-weight:inherit;font-style:inherit}[smart-toggle-button][checked],smart-toggle-button[checked]{color:var(--smart-ui-state-color-selected);border-color:var(--smart-ui-state-border-selected);background-color:var(--smart-ui-state-selected)}.smart-scroll-button .smart-button{padding:0}:host(.smart-button.flat) .smart-ripple{background-color:var(--smart-button-flat-color)}:host(.smart-button.outlined) .smart-ripple{background-color:var(--smart-button-outlined-color)}button.smart-button[type]:not(.smart-container){border-color:var(--smart-border);border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);border-width:var(--smart-border-width);border-style:solid;text-align:center;vertical-align:middle;cursor:pointer;text-transform:var(--smart-button-text-transform);font-weight:500;letter-spacing:.08929em;overflow:hidden;font-style:var(--smart-font-style);font-size:var(--smart-font-size);background:var(--smart-background);outline:0}button.smart-button[type]:hover{color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-border-hover);background-color:var(--smart-ui-state-hover)}button.smart-button[type]:not([disabled]):active{color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active)}smart-button[right-to-left],smart-repeat-button[right-to-left],smart-toggle-button[right-to-left]{direction:rtl}
-smart-scroll-bar{display:block;touch-action:none;width:var(--smart-scroll-bar-default-width);height:var(--smart-scroll-bar-default-height)}smart-scroll-bar .smart-thumb{position:absolute;width:40px;background-clip:content-box;padding:var(--smart-scroll-bar-thumb-padding) 0;height:var(--smart-scroll-bar-thumb-size);cursor:default;box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--smart-scroll-bar-thumb-border);background-color:var(--smart-scroll-bar-thumb-background);border-top-left-radius:var(--smart-scroll-bar-thumb-border-top-left-radius);border-top-right-radius:var(--smart-scroll-bar-thumb-border-top-right-radius);border-bottom-left-radius:var(--smart-scroll-bar-thumb-border-bottom-left-radius);border-bottom-right-radius:var(--smart-scroll-bar-thumb-border-bottom-right-radius)}smart-scroll-bar .smart-thumb:hover{border-color:var(--smart-scroll-bar-thumb-border-hover);background-color:var(--smart-scroll-bar-thumb-background-hover)}smart-scroll-bar .smart-thumb:active{border-color:var(--smart-scroll-bar-thumb-border-active);background-color:var(--smart-scroll-bar-thumb-background-active)}smart-scroll-bar .smart-track{position:relative;float:left;height:100%;background-color:var(--smart-scroll-bar-track-background);width:100%}smart-scroll-bar .smart-scroll-button{display:none;float:left;width:var(--smart-scroll-button-size);height:100%;cursor:default;background-color:var(--smart-scroll-bar-button-background);color:var(--smart-scroll-bar-button-color);border:1px solid var(--smart-scroll-bar-button-border);min-height:0;padding:0;border-radius:0}smart-scroll-bar .smart-scroll-button:hover{background-color:var(--smart-scroll-bar-button-background-hover);color:var(--smart-scroll-bar-button-color-hover);border-color:var(--smart-scroll-bar-button-border-hover)}smart-scroll-bar .smart-scroll-button:active{background-color:var(--smart-scroll-bar-button-background-active);color:var(--smart-scroll-bar-button-color-active);border-color:var(--smart-scroll-bar-button-border-active)}smart-scroll-bar[show-buttons] .smart-track{width:calc(calc(100% - var(--smart-scroll-button-size) * 2))}smart-scroll-bar[show-buttons] .smart-scroll-button{display:block}smart-scroll-bar[spinner][show-buttons] .smart-track{display:none}smart-scroll-bar[spinner][show-buttons] .smart-scroll-button{width:50%}smart-scroll-bar[discrete]{--smart-scroll-button-size:0px;--smart-scroll-bar-size:15px;--smart-scroll-bar-thumb-border-top-right-radius:6px;--smart-scroll-bar-thumb-border-top-left-radius:6px;--smart-scroll-bar-thumb-border-bottom-left-radius:6px;--smart-scroll-bar-thumb-border-bottom-right-radius:6px;--smart-scroll-bar-thumb-size:100%;--smart-scroll-bar-thumb-padding:3px;--smart-scroll-bar-default-width:var(--smart-editor-width);--smart-scroll-bar-default-height:var(--smart-scroll-bar-size);--smart-scroll-bar-background:#fafafa;--smart-scroll-bar-track-background:var(--smart-scroll-bar-background);--smart-scroll-bar-border:#F1F1F1;--smart-scroll-bar-thumb-background:#C1C1C1;--smart-scroll-bar-thumb-border:transparent}smart-scroll-bar[orientation=vertical]{height:var(--smart-scroll-bar-default-width);width:var(--smart-scroll-bar-default-height)}smart-scroll-bar[orientation=vertical] .smart-thumb{width:var(--smart-scroll-bar-thumb-size);padding:0 var(--smart-scroll-bar-thumb-padding);height:40px;top:0}smart-scroll-bar[orientation=vertical] .smart-track{float:none;width:100%;height:100%}smart-scroll-bar[orientation=vertical] .smart-scroll-button{float:none;height:var(--smart-scroll-button-size);width:100%}smart-scroll-bar[orientation=vertical][show-buttons] .smart-track{height:calc(calc(100% - var(--smart-scroll-button-size) * 2))}smart-scroll-bar[orientation=vertical][spinner] .smart-scroll-button{height:50%;width:100%;float:none}
+smart-scroll-bar{display:block;touch-action:none;width:var(--smart-scroll-bar-default-width);height:var(--smart-scroll-bar-default-height)}smart-scroll-bar .smart-thumb{position:absolute;width:40px;background-clip:content-box;padding:var(--smart-scroll-bar-thumb-padding) 0;height:var(--smart-scroll-bar-thumb-size);cursor:default;box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--smart-scroll-bar-thumb-border);background-color:var(--smart-scroll-bar-thumb-background);border-top-left-radius:var(--smart-scroll-bar-thumb-border-top-left-radius);border-top-right-radius:var(--smart-scroll-bar-thumb-border-top-right-radius);border-bottom-left-radius:var(--smart-scroll-bar-thumb-border-bottom-left-radius);border-bottom-right-radius:var(--smart-scroll-bar-thumb-border-bottom-right-radius)}smart-scroll-bar .smart-thumb:hover{border-color:var(--smart-scroll-bar-thumb-border-hover);background-color:var(--smart-scroll-bar-thumb-background-hover)}smart-scroll-bar .smart-thumb:active{border-color:var(--smart-scroll-bar-thumb-border-active);background-color:var(--smart-scroll-bar-thumb-background-active)}smart-scroll-bar .smart-track{position:relative;float:left;height:100%;background-color:var(--smart-scroll-bar-track-background);width:100%}smart-scroll-bar .smart-scroll-button{display:none;float:left;width:var(--smart-scroll-button-size);height:100%;cursor:default;background-color:var(--smart-scroll-bar-button-background);color:var(--smart-scroll-bar-button-color);border:1px solid var(--smart-scroll-bar-button-border);min-height:0;padding:0;border-radius:0}smart-scroll-bar .smart-scroll-button:hover{background-color:var(--smart-scroll-bar-button-background-hover);color:var(--smart-scroll-bar-button-color-hover);border-color:var(--smart-scroll-bar-button-border-hover)}smart-scroll-bar .smart-scroll-button:active{background-color:var(--smart-scroll-bar-button-background-active);color:var(--smart-scroll-bar-button-color-active);border-color:var(--smart-scroll-bar-button-border-active)}smart-scroll-bar[show-buttons] .smart-track{width:calc(100% - var(--smart-scroll-button-size) * 2)}smart-scroll-bar[show-buttons] .smart-scroll-button{display:block}smart-scroll-bar[spinner][show-buttons] .smart-track{display:none}smart-scroll-bar[spinner][show-buttons] .smart-scroll-button{width:50%}smart-scroll-bar[discrete]{--smart-scroll-button-size:0px;--smart-scroll-bar-size:15px;--smart-scroll-bar-thumb-border-top-right-radius:6px;--smart-scroll-bar-thumb-border-top-left-radius:6px;--smart-scroll-bar-thumb-border-bottom-left-radius:6px;--smart-scroll-bar-thumb-border-bottom-right-radius:6px;--smart-scroll-bar-thumb-size:100%;--smart-scroll-bar-thumb-padding:3px;--smart-scroll-bar-default-width:var(--smart-editor-width);--smart-scroll-bar-default-height:var(--smart-scroll-bar-size);--smart-scroll-bar-background:#fafafa;--smart-scroll-bar-track-background:var(--smart-scroll-bar-background);--smart-scroll-bar-border:#F1F1F1;--smart-scroll-bar-thumb-background:#C1C1C1;--smart-scroll-bar-thumb-border:transparent}smart-scroll-bar[orientation=vertical]{height:var(--smart-scroll-bar-default-width);width:var(--smart-scroll-bar-default-height)}smart-scroll-bar[orientation=vertical] .smart-thumb{width:var(--smart-scroll-bar-thumb-size);padding:0 var(--smart-scroll-bar-thumb-padding);height:40px;top:0}smart-scroll-bar[orientation=vertical] .smart-track{float:none;width:100%;height:100%}smart-scroll-bar[orientation=vertical] .smart-scroll-button{float:none;height:var(--smart-scroll-button-size);width:100%}smart-scroll-bar[orientation=vertical][show-buttons] .smart-track{height:calc(100% - var(--smart-scroll-button-size) * 2)}smart-scroll-bar[orientation=vertical][spinner] .smart-scroll-button{height:50%;width:100%;float:none}

package/demo/angular.json

@@ -1,126 +0,0 @@
-{
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "version": 1,
-    "newProjectRoot": "projects",
-    "projects": {
-    "demo": {
-        "root": "",
-        "sourceRoot": "src",
-        "projectType": "application",
-        "prefix": "app",
-        "schematics": {},
-        "architect": {
-        "build": {
-            "builder": "@angular-devkit/build-angular:browser",
-            "options": {
-            "outputPath": "dist/demo",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
-            "assets": [
-                "src/assets"
-            ],
-            "styles": [
-               	"./node_modules/@smart-webcomponents-angular/scrollbar/styles/smart.base.css",
-				"./node_modules/@smart-webcomponents-angular/scrollbar/styles/smart.scrollbar.css",
-				"./node_modules/@smart-webcomponents-angular/scrollbar/styles/smart.common.css",
-                "src/assets/fonts.css",
-			    "src/assets/styles.css"
-            ],
-            "scripts": []
-            },
-            "configurations": {
-            "production": {
-                "fileReplacements": [
-                {
-                    "replace": "src/environments/environment.ts",
-                    "with": "src/environments/environment.prod.ts"
-                }
-                ],
-                "optimization": false,
-                "outputHashing": "all",
-                "sourceMap": false,
-                "extractCss": true,
-                "namedChunks": false,
-                "aot": true,
-                "extractLicenses": true,
-                "vendorChunk": false,
-                "buildOptimizer": false
-            }
-            }
-        },
-        "serve": {
-            "builder": "@angular-devkit/build-angular:dev-server",
-            "options": {
-            "browserTarget": "demo:build"
-            },
-            "configurations": {
-            "production": {
-                "browserTarget": "demo:build:production"
-            }
-            }
-        },
-        "extract-i18n": {
-            "builder": "@angular-devkit/build-angular:extract-i18n",
-            "options": {
-            "browserTarget": "demo:build"
-            }
-        },
-        "test": {
-            "builder": "@angular-devkit/build-angular:karma",
-            "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-                "styles.css"
-            ],
-            "scripts": [],
-            "assets": [
-                "src/favicon.ico",
-                "src/assets"
-            ]
-            }
-        },
-        "lint": {
-            "builder": "@angular-devkit/build-angular:tslint",
-            "options": {
-            "tsConfig": [
-                "src/tsconfig.app.json",
-                "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-                "**/node_modules/**"
-            ]
-            }
-        }
-        }
-    },
-    "demo-e2e": {
-        "root": "e2e/",
-        "projectType": "application",
-        "architect": {
-        "e2e": {
-            "builder": "@angular-devkit/build-angular:protractor",
-            "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "demo:serve"
-            }
-        },
-        "lint": {
-            "builder": "@angular-devkit/build-angular:tslint",
-            "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-                "**/node_modules/**"
-            ]
-            }
-        }
-        }
-    }
-    },
-    "defaultProject": "demo"
-}
-            

package/demo/package.json

@@ -1,52 +0,0 @@
-{
-  "name": "angular-scrollbar-overview",
-  "description": "Angular scrollbar overview example. This example demonstrates commercial components by jQWidgets(https://www.jqwidgets.com/license/)",
-  "version": "1.0.0",
-  "homepage": "https://www.htmlelements.com/",
-   "dependencies": {
-    "@angular/animations": "^11.2.3",
-    "@angular/elements": "^11.2.3",
-    "@angular/common": "^11.2.3",
-    "@angular/compiler": "^11.2.3",
-    "@angular/core": "^11.2.3",
-    "@angular/forms": "^11.2.3",
-    "@angular/platform-browser": "^11.2.3",
-    "@angular/platform-browser-dynamic": "^11.2.3",
-    "@angular/router": "^11.2.3",
-    "@types/jasmine": "^3.6.6",
-    "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^14.14.31",
-    "core-js": "3.9.1",
-    "moment": "^2.29.1",
-    "@smart-webcomponents-angular/scrollbar": "9.2.22",
-    "rxjs": "^6.6.6",
-    "zone.js": "^0.11.4"
-  },
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.1",
-    "@angular/cli": "~11.2.3",
-    "@angular/compiler-cli": "~11.2.3",
-    "@angular/language-service": "~11.2.3",
-    "@types/node": "^14.14.35",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.4.1",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~3.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.3",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.1.5"
-  }
-}

package/demo/src/app/app.component.css

@@ -1,33 +0,0 @@
-
-        /* fallback */
-        @font-face {
-            font-family: 'Material Icons';
-            font-style: normal;
-            font-weight: 400;
-            src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
-        }
-
-        .material-icons {
-            font-family: 'Material Icons';
-            font-weight: normal;
-            font-style: normal;
-            font-size: inherit;
-            line-height: 1;
-            letter-spacing: normal;
-            text-transform: none;
-            display: inline-block;
-            white-space: nowrap;
-            word-wrap: normal;
-            direction: ltr;
-            -webkit-font-feature-settings: 'liga';
-            -webkit-font-smoothing: antialiased;
-        }
-
-smart-scroll-bar {
-	width: 250px;
-	height: 17px;
-}
-smart-scroll-bar[orientation="vertical"] {
-	width: 17px;
-	height: 250px;
-}

package/demo/src/app/app.component.html

@@ -1,128 +0,0 @@
-<section>
-    <div>
-         <h2>Scrollbars let users to select values by moving the scrollbar thumb.</h2>
-        <div class="module">
-            <p>Scrollbars are ideal components for adjusting settings that reflect intensity
-                levels, such as volume, brightness, or color saturation.</p>
-        </div>
-    </div>
-</section>
-<section id="continuousSliders">
-     <h2>Continuous scrollbar</h2>
-    <div class="module">
-        <p>Use continuous scrollbars for subjective settings that do not require
-            a specific value for the user to make meaningful adjustments.</p>
-    </div>
-    <div class="module continuousSliderLight">
-        <table>
-            <tr>
-                <td>
-                    <p>Normal</p>
-                </td>
-                <tr/>
-                <tr>
-                    <td>
-                        <smart-scroll-bar #scrollbar></smart-scroll-bar>
-                    </td>
-                    <tr/>
-                    <tr>
-                        <td>
-                            <smart-scroll-bar #scrollbar2 max="100" value="50"></smart-scroll-bar>
-                        </td>
-                        <tr/>
-                        <tr>
-                            <td>
-                                <smart-scroll-bar #scrollbar3 max="100" value="100"></smart-scroll-bar>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <p>Disabled</p>
-                            </td>
-                            <tr/>
-                            <tr>
-                                <td>
-                                    <smart-scroll-bar #scrollbar4 disabled max="100"></smart-scroll-bar>
-                                </td>
-                                <tr/>
-                                <tr>
-                                    <td>
-                                        <smart-scroll-bar #scrollbar5 disabled max="100" value="50"></smart-scroll-bar>
-                                    </td>
-                                    <tr/>
-                                    <tr>
-                                        <td>
-                                            <smart-scroll-bar #scrollbar6 disabled max="100" value="100"></smart-scroll-bar>
-                                        </td>
-                                    </tr>
-        </table>
-    </div>
-</section>
-<section id="verticalSliders">
-     <h2>Orientation</h2>
-    <div class="module">
-        <p>smartScrollBar can be horizontal or vertical depending on the orientation
-            property.</p>
-    </div>
-    <div class="module">
-        <div>
-            <smart-scroll-bar #scrollbar7 max="100" value="50"></smart-scroll-bar>
-            <br/>
-            <br/>
-            <smart-scroll-bar #scrollbar8 orientation="vertical" max="100" value="75"></smart-scroll-bar>
-        </div>
-        <br/>
-        <p>Vertical scrollbars</p>
-    </div>
-</section>
-<section id="demoSliders">
-     <h2>Demo</h2>
-    <div class="module">
-        <p>ScrollBars are controls that are used for adjusting values precisely.</p>
-    </div>
-    <div class="module media-controls">
-        <div>
-             <h2>Volumes</h2>
-            <div>
-                 <h3>Media volume</h3>
-                <div id="mediaControl" class="controls"> <i class="material-icons">&#xE04D;</i>
-                    <smart-scroll-bar #scrollbar9 id="mediaSlider"
-                    max="100" value="25"></smart-scroll-bar>
-                </div>
-            </div>
-            <div>
-                 <h3>Alarm volume</h3>
-                <div id="alarmControl" class="controls"> <i class="material-icons">&#xE855;</i>
-                    <smart-scroll-bar #scrollbar10 id="alarmSlider"
-                    max="100" value="50"></smart-scroll-bar>
-                </div>
-            </div>
-            <div>
-                 <h3>Ring volume</h3>
-                <div id="ringControl" class="controls"> <i class="material-icons">&#xE7F4;</i>
-                    <smart-scroll-bar #scrollbar11 id="volumeSlider"
-                    max="100" value="75"></smart-scroll-bar>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="module power-controls">
-        <div>
-             <h2>Battery Saver Mode</h2>
-            <div>
-                 <h3>Low battery alert on <b id="lowBatteryAlert">15</b> %</h3>
-                <div id="mediaControl" class="controls"> <i class="material-icons">&#xE8B2;</i>
-                    <smart-scroll-bar #scrollbar12 id="lowBatterySlider"
-                    max="100" value="15" scale-type="integer"></smart-scroll-bar>
-                </div>
-            </div>
-            <div>
-                 <h3>Power saver mode active on <b id="powerSaver">50</b>%</h3>
-                <div id="alarmControl" class="controls"> <i class="material-icons">&#xE19C;</i>
-                    <smart-scroll-bar #scrollbar13 id="powerSaverSlider"
-                    max="100" value="50" scale-type="integer"></smart-scroll-bar>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>

package/demo/src/assets/fonts.css

@@ -1,13 +0,0 @@
-@font-face {
-  font-family: "smart-icons";
-  src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot");
-  src: 
-	url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2")
-      format("woff2"),
-	url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff")
-      format("woff"),
-    url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}

package/demo/src/assets/styles.css

@@ -1,12 +0,0 @@
-body, html {
-	width: 100%;
-	height: 100%;
-	padding: 0px;
-	margin: 0px;
-	min-height: 1000px;
-}
-app-root {
-	display: block;
-	width: 100%;
-	height: 100%;
-}

package/demo/src/index.html

@@ -1,42 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Angular Scrollbar Overview</title>
-  <base href="/">
-  <link rel="stylesheet" href="https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/smart.default.css"/>
-  <style>
-@font-face {
-  font-family: "smart-icons";
-  src: url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.eot");
-  src: 
-	url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff2")
-      format("woff2"),
-	url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.woff")
-      format("woff"),
-    url("https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/source/styles/font/smart-icons.ttf")
-      format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-  </style>
-  <script>
-    console.log('****************************************************************************************************************');
-	console.log('****************************************************************************************************************');
-	console.log('****************************************************************************************************************');
-	console.log('*jQWidgets License Key Not Found.');
-	console.log('*This is an EVALUATION only Version, it is NOT Licensed for software projects intended for PRODUCTION.');
-	console.log('*if you want to hide this message, please send an email to: sales@jqwidgets.com for a license.');
-	console.log('****************************************************************************************************************');
-	console.log('****************************************************************************************************************');
-	console.log('****************************************************************************************************************');
-  </script>  
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
-	<app-root>Loading...</app-root>
-	 <div style="position: absolute; bottom: 5px; right: 5px;">
-         <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
-	</div>
-</body>
-</html>

package/demo/src/tsconfig.app.json

@@ -1,15 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "main.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}

package/demo/src/tsconfig.json

@@ -1,23 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2015",
-    "module": "es2020",
-    "lib": [
-      "es2018",
-      "dom"
-    ]
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false
-  }
-}

package/start.js

@@ -1,5 +0,0 @@
-
-const { exec } = require("child_process");
-
-exec('cd ' + __dirname + '/demo && npm install && npm run start'); 
-console.log("Installing npm modules and running ng serve. Please, open localhost:4200 in your web browser.");