@ruc-lib/metered-progress-bar 3.1.0 → 3.2.0

package/fesm2015/ruc-lib-metered-progress-bar.mjs

@@ -0,0 +1,231 @@
+import * as i0 from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+
+var LablePositionEnums;
+(function (LablePositionEnums) {
+    LablePositionEnums["left"] = "left";
+    LablePositionEnums["right"] = "right";
+    LablePositionEnums["same"] = "same";
+    LablePositionEnums["top"] = "top";
+    LablePositionEnums["bottom"] = "bottom";
+})(LablePositionEnums || (LablePositionEnums = {}));
+
+class RucMeteredProgressBarComponent {
+    constructor() {
+        this.hoveredCategoryDetail = null;
+        this.hoverLabelStyle = { left: '0px', top: '-28px', display: 'none', transform: 'translateX(-50%)' };
+        this.progressPercentage = 0;
+    }
+    /**
+     * Calculates the total value of all categories.
+     * @returns The sum of all category values.
+     */
+    get totalValue() {
+        return this.rucInputData.categories.reduce((sum, category) => sum + category.value, 0);
+    }
+    /**
+     * Calculates the overall progress percentage of the bar based on total value, min, and max.
+     * @returns The progress as a percentage (0-100).
+     */
+    get progress() {
+        return ((this.totalValue - this.rucInputData.min) / (this.rucInputData.max - this.rucInputData.min)) * 100;
+    }
+    /**
+     * Determines if the progress bar is oriented vertically.
+     * @returns True if the orientation is 'vertical', false otherwise.
+     */
+    get isVertical() {
+        return this.rucInputData.orientation === 'vertical';
+    }
+    /**
+     * Generates the CSS linear-gradient string for the progress bar.
+     * The gradient is composed of segments based on category values and colors.
+     * If no categories or total value is zero, it returns a transparent gradient.
+     * @returns A CSS linear-gradient string.
+     */
+    get progressStyles() {
+        var _a;
+        const direction = this.isVertical ? 'to bottom' : 'to right';
+        if (!this.rucInputData || !this.rucInputData.categories) {
+            return { background: 'transparent' };
+        }
+        const total = this.totalValue;
+        const colorStops = [];
+        let cumulativePercentage = 0;
+        if (total > 0) {
+            this.rucInputData.categories.forEach(category => {
+                if (category.value <= 0)
+                    return; // Skip categories with zero or negative contribution
+                const segmentPercentage = (category.value / total) * 100;
+                const color = category.color;
+                // Add start of the segment using the previous cumulative percentage
+                colorStops.push(`${color} ${cumulativePercentage}%`);
+                // Update cumulative percentage for the end of this segment
+                cumulativePercentage += segmentPercentage;
+                // Add end of the segment
+                // Use Math.min to cap at 100% in case of floating point overshoot on the last segment
+                colorStops.push(`${color} ${Math.min(cumulativePercentage, 100)}%`);
+            });
+        }
+        if (colorStops.length === 0) {
+            return { background: 'transparent' };
+        }
+        const baseGradient = `linear-gradient(${direction}, ${colorStops.join(', ')})`;
+        const styles = {};
+        const barStyle = (_a = this.rucInputData) === null || _a === void 0 ? void 0 : _a.barStyle;
+        switch (barStyle) {
+            case 'stripe':
+                // This uses multiple backgrounds for an overlay effect, as requested.
+                styles['background'] = `repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0, 0, 0, 0.1) 5px, rgba(0, 0, 0, 0.1) 10px), ${baseGradient}`;
+                break;
+            case 'circle': {
+                // This uses a mask. The background is the color, the mask cuts out the shape.
+                styles['background'] = baseGradient;
+                // A repeating pattern of circles. Each circle has a diameter of 8px, with a 4px gap.
+                const circleMask = 'radial-gradient(circle, black 4px, transparent 4px) 0 0 / 12px 12px';
+                styles['-webkit-mask'] = circleMask;
+                styles['mask'] = circleMask;
+                break;
+            }
+            case 'rectangle': {
+                styles['background'] = baseGradient;
+                // For vertical bar, create horizontal rectangles (0deg). For horizontal bar, create vertical rectangles (90deg).
+                const rectDirection = this.isVertical ? '0deg' : '90deg';
+                // A repeating pattern of bars. Each bar is 6px wide with a 6px gap.
+                const rectangleMask = `repeating-linear-gradient(${rectDirection}, black, black 6px, transparent 6px, transparent 12px)`;
+                styles['-webkit-mask'] = rectangleMask;
+                styles['mask'] = rectangleMask;
+                break;
+            }
+            default: // 'solid' or undefined
+                styles['background'] = baseGradient;
+                break;
+        }
+        return styles;
+    }
+    /**
+     * Handles mouse movement over the progress bar to display category-specific hover details.
+     * It calculates the hovered segment based on mouse position and updates the hover label.
+     * @param event The MouseEvent object.
+     */
+    onProgressMouseMove(event) {
+        const progressBarElement = event.target;
+        let currentCumulativeGradientPct = 0;
+        let foundCategoryForHover = null;
+        let hoverPercentage_onFilledBar = 0;
+        let mousePositionWithinProgressDiv = 0;
+        if (this.isVertical) {
+            mousePositionWithinProgressDiv = event.offsetY; // Y position within the .progress div
+            const filledHeightPx = progressBarElement.offsetHeight;
+            if (filledHeightPx <= 0) { // Avoid division by zero if element has no height
+                this.onProgressMouseLeave();
+                return;
+            }
+            hoverPercentage_onFilledBar = (mousePositionWithinProgressDiv / filledHeightPx) * 100;
+        }
+        else { // Horizontal
+            mousePositionWithinProgressDiv = event.offsetX; // X position within the .progress div
+            const filledWidthPx = progressBarElement.offsetWidth;
+            if (filledWidthPx <= 0) { // Avoid division by zero if element has no width
+                this.onProgressMouseLeave();
+                return;
+            }
+            hoverPercentage_onFilledBar = (mousePositionWithinProgressDiv / filledWidthPx) * 100;
+        }
+        if (this.totalValue > 0) {
+            for (const category of this.rucInputData.categories) {
+                if (category.value <= 0)
+                    continue; // Skip categories with zero or negative contribution
+                const segmentGradientPct = (category.value / this.totalValue) * 100;
+                const segmentStartGradientPct = currentCumulativeGradientPct;
+                const segmentEndGradientPct = currentCumulativeGradientPct + segmentGradientPct;
+                // Ensure hoverPercentage is within the segment, handling potential floating point inaccuracies for the last segment
+                if (hoverPercentage_onFilledBar >= segmentStartGradientPct && // Check if mouse is within or at the start of the segment
+                    (hoverPercentage_onFilledBar < segmentEndGradientPct ||
+                        (segmentEndGradientPct >= 99.99 && hoverPercentage_onFilledBar <= 100.01))) { // Tolerate slight overshoot for last segment
+                    foundCategoryForHover = category;
+                    break;
+                }
+                currentCumulativeGradientPct = segmentEndGradientPct;
+            }
+        }
+        if (foundCategoryForHover) {
+            const percentageOfMax = (foundCategoryForHover.value / this.rucInputData.max) * 100; // Calculate percentage relative to max value
+            this.hoveredCategoryDetail = { category: foundCategoryForHover, percentageText: percentageOfMax.toFixed(0) + '%' };
+            if (this.isVertical) {
+                this.hoverLabelStyle = {
+                    left: 'calc(100% + 5px)',
+                    top: mousePositionWithinProgressDiv + 'px',
+                    display: 'block',
+                    transform: 'translateY(-50%)' // Vertically center label on mouse Y
+                };
+            }
+            else {
+                this.hoverLabelStyle = {
+                    left: mousePositionWithinProgressDiv + 'px',
+                    top: '-28px',
+                    display: 'block',
+                    transform: 'translateX(-50%)' // Horizontally center label on mouse X
+                };
+            }
+        }
+        else {
+            this.hoveredCategoryDetail = null;
+            this.hoverLabelStyle = Object.assign(Object.assign({}, this.hoverLabelStyle), { display: 'none' });
+        }
+    }
+    /**
+     * Hides the hover label when the mouse leaves the progress bar.
+     */
+    onProgressMouseLeave() {
+        this.hoveredCategoryDetail = null;
+        this.hoverLabelStyle = Object.assign(Object.assign({}, this.hoverLabelStyle), { display: 'none' });
+    }
+    /**
+     * get the label position  string value
+       */
+    get LablePositionEnums() {
+        return LablePositionEnums;
+    }
+}
+RucMeteredProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RucMeteredProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RucMeteredProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RucMeteredProgressBarComponent, selector: "uxp-ruclib-metered-progress-bar", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, ngImport: i0, template: "<div class=\"main\">\r\n<div class=\"progress-container\" class={{customTheme}} [class.vertical]=\"isVertical\" [class.horizontal]=\"!isVertical\">\r\n  <div *ngIf=\"rucInputData.barLabels\" class=\"progress-label-container {{rucInputData.orientation}}\">\r\n    <p class=\"progress-label\">{{progress | number:'1.0-0'}}% of {{rucInputData.max}} {{rucInputData.unitType}}\r\n      Used\r\n    </p>\r\n  </div>\r\n    \r\n  <div class=\"progress-bar\">\r\n    <!-- Removed (mouseenter) and (mouseleave) from progress-bar if only category hover is needed -->\r\n   \r\n    <!-- <mat-progress-bar> -->\r\n      <div class=\"progress\" [style.width]=\"isVertical ? '100%' : progress + '%'\"\r\n        [style.height]=\"isVertical ? progress + '%' : '100%'\"\r\n        [style.transition]=\"rucInputData.orientation === 'vertical' ? 'height 0.3s ease' : 'width 0.3s ease'\"\r\n        [ngStyle]=\"progressStyles\">\r\n        <!-- This div is now only for displaying the colored bar -->\r\n      </div>\r\n    <!-- </mat-progress-bar> -->\r\n    <!-- The hover label is now a sibling to .progress, positioned absolutely within .progress-bar -->\r\n    <div class=\"hover-label\" *ngIf=\"hoveredCategoryDetail\" [ngStyle]=\"hoverLabelStyle\">\r\n      {{hoveredCategoryDetail.category.label}}: {{hoveredCategoryDetail.percentageText}}\r\n    </div>\r\n    <!-- This overlay is now a sibling to .progress, sized to match it, to reliably capture mouse events -->\r\n    <div class=\"progress-event-overlay\" [style.width]=\"isVertical ? '100%' : progress + '%'\"\r\n      [style.height]=\"isVertical ? progress + '%' : '100%'\" (mousemove)=\"onProgressMouseMove($event)\"\r\n      (mouseleave)=\"onProgressMouseLeave()\"></div>\r\n  </div>\r\n  <div class=\"categories-container\" *ngIf=\"rucInputData.categories.length > 0\">\r\n    <div *ngIf=\"rucInputData.showCategoryLabels && rucInputData.categoryLabelStyle === 'basic'\" [ngClass]=\"{\r\n           'categories-block-top':    !isVertical && (rucInputData.categoryLabelsOrientation === 'top' || rucInputData.categoryLabelsOrientation === 'same'),\r\n           'categories-block-left':   isVertical && (rucInputData.categoryLabelsOrientation === 'left' || rucInputData.categoryLabelsOrientation === 'same'),\r\n           'categories-block-right':  isVertical && !(rucInputData.categoryLabelsOrientation === 'left' || rucInputData.categoryLabelsOrientation === 'same')\r\n         }\" class=\"categories\">\r\n      <div class=\"category\" *ngFor=\"let category of rucInputData.categories\" [style.color]=\"category.color\">\r\n        <ng-container *ngIf=\"category.icon !== undefined\">\r\n          <div *ngIf=\"category.icon; else colorDotBasic\" class=\"category-icon-wrapper\">\r\n            <i class=\"material-icons\" [style.color]=\"category.color\">{{ category.icon }}</i>\r\n          </div>\r\n          <ng-template #colorDotBasic>\r\n            <div class=\"category-color\">\r\n              <div class=\"color-gradient\"\r\n                [style.background]=\"category.color ? 'linear-gradient(to right, ' + category.color + ', ' + category.color + ')' : ''\">\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <span class=\"category-label\">{{category.label}}</span>\r\n        <p class=\"category-value\">({{(category.value / rucInputData.max * 100) | number:'1.0-0' }}%)</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"rucInputData.showCategoryLabels && rucInputData.categoryLabelStyle === 'widget'\"\r\n      class=\"categories widget-style\" [ngClass]=\"{\r\n           'categories-block-top':    !isVertical && (rucInputData.categoryLabelsOrientation === LablePositionEnums.top || rucInputData.categoryLabelsOrientation === LablePositionEnums.same),\r\n           'categories-block-left':   isVertical && (rucInputData.categoryLabelsOrientation === LablePositionEnums.left || rucInputData.categoryLabelsOrientation === LablePositionEnums.same),\r\n           'categories-block-right':  isVertical && !(rucInputData.categoryLabelsOrientation === LablePositionEnums.left || rucInputData.categoryLabelsOrientation === LablePositionEnums.same)\r\n         }\">\r\n      <ng-container *ngFor=\"let category of rucInputData.categories\">\r\n        <mat-card>\r\n          <div class=\"widget-category\">\r\n            <div class=\"widget-content\">\r\n              <div class=\"widget-icon-box\">\r\n                <ng-container *ngIf=\"category.icon !== undefined\">\r\n                  <div *ngIf=\"category.icon; else colorDotWidget\" class=\"widget-icon\">\r\n                    <i class=\"material-icons\" [style.color]=\"category.color\">{{ category.icon }}</i>\r\n                  </div>\r\n                  <ng-template #colorDotWidget>\r\n                    <div class=\"category-color\">\r\n                      <div class=\"color-gradient\"\r\n                        [style.background]=\"category.color ? 'linear-gradient(to right, ' + category.color + ', ' + category.color + ')' : ''\">\r\n                      </div>\r\n                    </div>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <div class=\"widget-label\">{{category.label}}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"widget-value\">\r\n              <div>{{category.value}}</div>\r\n            </div>\r\n          </div>\r\n        </mat-card>\r\n\r\n\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n</div>\r\n", styles: [".mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0,0,.2,1);transform:scale3d(0,0,0)}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{padding:2px 0!important;box-sizing:content-box!important;height:auto!important;overflow:hidden!important}textarea.cdk-textarea-autosize-measuring-firefox{padding:2px 0!important;box-sizing:content-box!important;height:0!important}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}.mat-focus-indicator{position:relative}.mat-focus-indicator:before{inset:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-focus-indicator-display, none);border:var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);border-radius:var(--mat-focus-indicator-border-radius, 4px)}.mat-focus-indicator:focus:before{content:\"\"}.cdk-high-contrast-active{--mat-focus-indicator-display: block}.mat-mdc-focus-indicator{position:relative}.mat-mdc-focus-indicator:before{inset:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-mdc-focus-indicator-display, none);border:var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);border-radius:var(--mat-mdc-focus-indicator-border-radius, 4px)}.mat-mdc-focus-indicator:focus:before{content:\"\"}.cdk-high-contrast-active{--mat-mdc-focus-indicator-display: block}.main{font-size:16px;font-weight:400;line-height:24px;font-family:Roboto,sans-serif;letter-spacing:.03125em}.ruc-custom-theme{font-size:14px;font-weight:400;line-height:20px;font-family:Roboto,sans-serif;letter-spacing:normal}.ruc-custom-theme .mat-mdc-option{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body1-font-size, 15px);line-height:var(--mdc-typography-body1-line-height, 24px);font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:var(--mdc-typography-body1-letter-spacing, normal)}.ruc-custom-theme .mat-mdc-card-title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-headline6-font-size, 20px);line-height:var(--mdc-typography-headline6-line-height, 32px);font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:var(--mdc-typography-headline6-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:var(--mdc-typography-headline6-text-transform, none)}.ruc-custom-theme .mat-mdc-card-subtitle{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle2-font-size, 20px);line-height:var(--mdc-typography-subtitle2-line-height, 24px);font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle2-text-transform, none)}.ruc-custom-theme .mat-mdc-tooltip{--mdc-plain-tooltip-supporting-text-font: Roboto, sans-serif;--mdc-plain-tooltip-supporting-text-size: 12px;--mdc-plain-tooltip-supporting-text-weight: 400;--mdc-plain-tooltip-supporting-text-tracking: normal}.ruc-custom-theme .mat-mdc-form-field-infix{min-height:56px}.ruc-custom-theme .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:28px}.ruc-custom-theme .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -34.75px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}.ruc-custom-theme .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:16px;padding-bottom:16px}.ruc-custom-theme .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix{padding-top:24px;padding-bottom:8px}.ruc-custom-theme .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix{padding-top:16px;padding-bottom:16px}.ruc-custom-theme .mdc-text-field__input,.ruc-custom-theme .mdc-text-field__affix{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none)}.ruc-custom-theme .mdc-text-field--textarea .mdc-text-field__input{line-height:1.5rem}.ruc-custom-theme .mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none)}.ruc-custom-theme .mat-mdc-form-field-subscript-wrapper,.ruc-custom-theme .mat-mdc-form-field-bottom-align:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-caption-font-size, 12px);line-height:var(--mdc-typography-caption-line-height, 20px);font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:var(--mdc-typography-caption-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:var(--mdc-typography-caption-text-transform, none)}.ruc-custom-theme .mat-mdc-form-field,.ruc-custom-theme .mat-mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body1-font-size, 15px);line-height:var(--mdc-typography-body1-line-height, 24px);font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:var(--mdc-typography-body1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:var(--mdc-typography-body1-text-transform, none)}.ruc-custom-theme .mat-mdc-form-field .mdc-text-field--outlined .mdc-floating-label--float-above{font-size:calc(15px * var(--mat-mdc-form-field-floating-label-scale, .75))}.ruc-custom-theme .mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:15px}.ruc-custom-theme .mat-mdc-select-panel{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);line-height:var(--mdc-typography-subtitle1-line-height, 28px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none);line-height:24px}.ruc-custom-theme .mat-mdc-select{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body1-font-size, 15px);line-height:var(--mdc-typography-body1-line-height, 24px);font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:var(--mdc-typography-body1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:var(--mdc-typography-body1-text-transform, none)}.ruc-custom-theme .mat-mdc-autocomplete-panel{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);line-height:var(--mdc-typography-subtitle1-line-height, 28px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none);line-height:24px}.ruc-custom-theme .mat-mdc-dialog-container{--mdc-dialog-subhead-font: Roboto, sans-serif;--mdc-dialog-subhead-line-height: 32px;--mdc-dialog-subhead-size: 20px;--mdc-dialog-subhead-weight: 500;--mdc-dialog-subhead-tracking: normal;--mdc-dialog-supporting-text-font: Roboto, sans-serif;--mdc-dialog-supporting-text-line-height: 24px;--mdc-dialog-supporting-text-size: 15px;--mdc-dialog-supporting-text-weight: 400;--mdc-dialog-supporting-text-tracking: normal}.ruc-custom-theme .mat-mdc-chip{height:32px}.ruc-custom-theme .mat-mdc-standard-chip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:var(--mdc-typography-body2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:var(--mdc-typography-body2-text-transform, none)}.ruc-custom-theme .mat-mdc-slide-toggle{--mdc-switch-state-layer-size: 48px}.ruc-custom-theme .mat-mdc-radio-button .mdc-radio{padding:10px}.ruc-custom-theme .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{top:-10px;left:-10px;width:40px;height:40px}.ruc-custom-theme .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control{top:0;right:0;left:0;width:40px;height:40px}.ruc-custom-theme .mat-mdc-slider{--mdc-slider-label-label-text-font: Roboto, sans-serif;--mdc-slider-label-label-text-size: 20px;--mdc-slider-label-label-text-line-height: 24px;--mdc-slider-label-label-text-tracking: normal;--mdc-slider-label-label-text-weight: 500}.ruc-custom-theme .mat-mdc-menu-content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);line-height:var(--mdc-typography-subtitle1-line-height, 28px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none);line-height:24px}.ruc-custom-theme .mat-mdc-menu-content,.ruc-custom-theme .mat-mdc-menu-content .mat-mdc-menu-item .mdc-list-item__primary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body1-font-size, 15px);line-height:var(--mdc-typography-body1-line-height, 24px);font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:var(--mdc-typography-body1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:var(--mdc-typography-body1-text-transform, none)}.ruc-custom-theme .mat-mdc-list-base{--mdc-list-list-item-one-line-container-height: 48px;--mdc-list-list-item-two-line-container-height: 64px;--mdc-list-list-item-three-line-container-height: 88px}.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}.ruc-custom-theme .mat-mdc-list-base{--mdc-list-list-item-label-text-font: Roboto, sans-serif;--mdc-list-list-item-label-text-line-height: 24px;--mdc-list-list-item-label-text-size: 15px;--mdc-list-list-item-label-text-tracking: normal;--mdc-list-list-item-label-text-weight: 400;--mdc-list-list-item-supporting-text-font: Roboto, sans-serif;--mdc-list-list-item-supporting-text-line-height: 20px;--mdc-list-list-item-supporting-text-size: 14px;--mdc-list-list-item-supporting-text-tracking: normal;--mdc-list-list-item-supporting-text-weight: 400;--mdc-list-list-item-trailing-supporting-text-font: Roboto, sans-serif;--mdc-list-list-item-trailing-supporting-text-line-height: 20px;--mdc-list-list-item-trailing-supporting-text-size: 12px;--mdc-list-list-item-trailing-supporting-text-tracking: normal;--mdc-list-list-item-trailing-supporting-text-weight: 400}.ruc-custom-theme .mdc-list-group__subheader{font-size:16px;font-weight:400;line-height:28px;font-family:Roboto,sans-serif;letter-spacing:normal}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-form-field-infix{min-height:40px}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:20px}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -26.75px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}.ruc-custom-theme .mat-mdc-paginator .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label{display:none}.ruc-custom-theme .mat-mdc-paginator-container{min-height:56px}.ruc-custom-theme .mat-mdc-paginator{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-caption-font-size, 12px);line-height:var(--mdc-typography-caption-line-height, 20px);font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:var(--mdc-typography-caption-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:var(--mdc-typography-caption-text-transform, none)}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-select-value{font-size:12px}.ruc-custom-theme .mat-mdc-tab-header .mdc-tab{height:48px}.ruc-custom-theme .mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-button-font-size, 20px);line-height:var(--mdc-typography-button-line-height, 60px);font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:var(--mdc-typography-button-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-button-text-decoration, none);text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:var(--mdc-typography-button-text-transform, none)}.ruc-custom-theme .mat-mdc-checkbox .mdc-checkbox{padding:calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2);margin:calc((var(--mdc-checkbox-touch-target-size, 40px) - 40px) / 2)}.ruc-custom-theme .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__background{top:calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2);left:calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2)}.ruc-custom-theme .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control{top:calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);right:calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);left:calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);width:var(--mdc-checkbox-touch-target-size, 40px);height:var(--mdc-checkbox-touch-target-size, 40px)}@media all and (-ms-high-contrast: none){.ruc-custom-theme .mdc-checkbox .mdc-checkbox__focus-ring{display:none}}.ruc-custom-theme .mdc-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:var(--mdc-typography-body2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:var(--mdc-typography-body2-text-transform, none)}.ruc-custom-theme .mat-mdc-button.mat-mdc-button-base,.ruc-custom-theme .mat-mdc-raised-button.mat-mdc-button-base,.ruc-custom-theme .mat-mdc-unelevated-button.mat-mdc-button-base,.ruc-custom-theme .mat-mdc-outlined-button.mat-mdc-button-base{height:36px}.ruc-custom-theme .mdc-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-button-font-size, 20px);line-height:var(--mdc-typography-button-line-height, 60px);font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:var(--mdc-typography-button-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-button-text-decoration, none);text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:var(--mdc-typography-button-text-transform, none)}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base{width:48px;height:48px;padding:12px}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base .mdc-icon-button__focus-ring{max-height:48px;max-width:48px}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button--reduced-size .mdc-icon-button__ripple{width:40px;height:40px;margin:4px}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button--reduced-size .mdc-icon-button__focus-ring{max-height:40px;max-width:40px}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}.ruc-custom-theme .mdc-fab--extended{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-button-font-size, 20px);line-height:var(--mdc-typography-button-line-height, 60px);font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:var(--mdc-typography-button-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-button-text-decoration, none);text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:var(--mdc-typography-button-text-transform, none)}.ruc-custom-theme .mat-mdc-snack-bar-container{--mdc-snackbar-supporting-text-font: Roboto, sans-serif;--mdc-snackbar-supporting-text-line-height: 20px;--mdc-snackbar-supporting-text-size: 14px;--mdc-snackbar-supporting-text-weight: 400}.ruc-custom-theme .mat-mdc-table .mdc-data-table__row{height:52px}.ruc-custom-theme .mat-mdc-table .mdc-data-table__pagination{min-height:52px}.ruc-custom-theme .mat-mdc-table .mdc-data-table__header-row{height:56px}.ruc-custom-theme .mdc-data-table__content,.ruc-custom-theme .mdc-data-table__cell{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:var(--mdc-typography-body2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:var(--mdc-typography-body2-text-transform, none)}.ruc-custom-theme .mdc-data-table__header-cell{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle2-font-size, 20px);line-height:var(--mdc-typography-subtitle2-line-height, 24px);font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle2-text-transform, none)}.ruc-custom-theme .mat-badge{position:relative}.ruc-custom-theme .mat-badge.mat-badge{overflow:visible}.ruc-custom-theme .mat-badge-hidden .mat-badge-content{display:none}.ruc-custom-theme .mat-badge-content{position:absolute;text-align:center;display:inline-block;border-radius:50%;transition:transform .2s ease-in-out;transform:scale(.6);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.ruc-custom-theme .ng-animate-disabled .mat-badge-content,.ruc-custom-theme .mat-badge-content._mat-animation-noopable{transition:none}.ruc-custom-theme .mat-badge-content.mat-badge-active{transform:none}.ruc-custom-theme .mat-badge-small .mat-badge-content{width:16px;height:16px;line-height:16px}.ruc-custom-theme .mat-badge-small.mat-badge-above .mat-badge-content{top:-8px}.ruc-custom-theme .mat-badge-small.mat-badge-below .mat-badge-content{bottom:-8px}.ruc-custom-theme .mat-badge-small.mat-badge-before .mat-badge-content{left:-16px}[dir=rtl] .ruc-custom-theme .mat-badge-small.mat-badge-before .mat-badge-content{left:auto;right:-16px}.ruc-custom-theme .mat-badge-small.mat-badge-after .mat-badge-content{right:-16px}[dir=rtl] .ruc-custom-theme .mat-badge-small.mat-badge-after .mat-badge-content{right:auto;left:-16px}.ruc-custom-theme .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-8px}[dir=rtl] .ruc-custom-theme .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-8px}.ruc-custom-theme .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-8px}[dir=rtl] .ruc-custom-theme .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-8px}.ruc-custom-theme .mat-badge-medium .mat-badge-content{width:22px;height:22px;line-height:22px}.ruc-custom-theme .mat-badge-medium.mat-badge-above .mat-badge-content{top:-11px}.ruc-custom-theme .mat-badge-medium.mat-badge-below .mat-badge-content{bottom:-11px}.ruc-custom-theme .mat-badge-medium.mat-badge-before .mat-badge-content{left:-22px}[dir=rtl] .ruc-custom-theme .mat-badge-medium.mat-badge-before .mat-badge-content{left:auto;right:-22px}.ruc-custom-theme .mat-badge-medium.mat-badge-after .mat-badge-content{right:-22px}[dir=rtl] .ruc-custom-theme .mat-badge-medium.mat-badge-after .mat-badge-content{right:auto;left:-22px}.ruc-custom-theme .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-11px}[dir=rtl] .ruc-custom-theme .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-11px}.ruc-custom-theme .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-11px}[dir=rtl] .ruc-custom-theme .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-11px}.ruc-custom-theme .mat-badge-large .mat-badge-content{width:28px;height:28px;line-height:28px}.ruc-custom-theme .mat-badge-large.mat-badge-above .mat-badge-content{top:-14px}.ruc-custom-theme .mat-badge-large.mat-badge-below .mat-badge-content{bottom:-14px}.ruc-custom-theme .mat-badge-large.mat-badge-before .mat-badge-content{left:-28px}[dir=rtl] .ruc-custom-theme .mat-badge-large.mat-badge-before .mat-badge-content{left:auto;right:-28px}.ruc-custom-theme .mat-badge-large.mat-badge-after .mat-badge-content{right:-28px}[dir=rtl] .ruc-custom-theme .mat-badge-large.mat-badge-after .mat-badge-content{right:auto;left:-28px}.ruc-custom-theme .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-14px}[dir=rtl] .ruc-custom-theme .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-14px}.ruc-custom-theme .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-14px}[dir=rtl] .ruc-custom-theme .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-14px}.ruc-custom-theme .mat-badge-content{font-weight:600;font-size:12px;font-family:Roboto,sans-serif}.ruc-custom-theme .mat-badge-small .mat-badge-content{font-size:9px}.ruc-custom-theme .mat-badge-large .mat-badge-content{font-size:24px}.ruc-custom-theme .mat-bottom-sheet-container{font-size:14px;font-weight:400;line-height:20px;font-family:Roboto,sans-serif;letter-spacing:normal}.ruc-custom-theme .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:48px}.ruc-custom-theme .mat-button-toggle{font-family:Roboto,sans-serif}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{width:40px;height:40px;padding:8px}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mdc-icon-button__focus-ring{max-height:40px;max-width:40px}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button--reduced-size .mdc-icon-button__ripple{width:40px;height:40px;margin:0}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button--reduced-size .mdc-icon-button__focus-ring{max-height:40px;max-width:40px}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mdc-icon-button__touch{position:absolute;top:50%;height:40px;left:50%;width:40px;transform:translate(-50%,-50%)}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.ruc-custom-theme .mat-calendar{font-family:Roboto,sans-serif}.ruc-custom-theme .mat-calendar-body{font-size:13px}.ruc-custom-theme .mat-calendar-body-label,.ruc-custom-theme .mat-calendar-period-button{font-size:20px;font-weight:500}.ruc-custom-theme .mat-calendar-table-header th{font-size:11px;font-weight:400}.ruc-custom-theme .mat-expansion-panel-header{height:48px}.ruc-custom-theme .mat-expansion-panel-header.mat-expanded{height:64px}.ruc-custom-theme .mat-expansion-panel-header{font-family:Roboto,sans-serif;font-size:15px;font-weight:400}.ruc-custom-theme .mat-expansion-panel-content{font-size:14px;font-weight:400;line-height:20px;font-family:Roboto,sans-serif;letter-spacing:normal}.ruc-custom-theme .mat-grid-tile-header,.ruc-custom-theme .mat-grid-tile-footer{font-size:14px}.ruc-custom-theme .mat-grid-tile-header .mat-line,.ruc-custom-theme .mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.ruc-custom-theme .mat-grid-tile-header .mat-line:nth-child(n+2),.ruc-custom-theme .mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:12px}.ruc-custom-theme .mat-horizontal-stepper-header{height:72px}.ruc-custom-theme .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,.ruc-custom-theme .mat-vertical-stepper-header{padding:24px}.ruc-custom-theme .mat-stepper-vertical-line:before{top:-16px;bottom:-16px}.ruc-custom-theme .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:after,.ruc-custom-theme .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:before{top:36px}.ruc-custom-theme .mat-stepper-label-position-bottom .mat-stepper-horizontal-line{top:36px}.ruc-custom-theme .mat-stepper-vertical,.ruc-custom-theme .mat-stepper-horizontal{font-family:Roboto,sans-serif}.ruc-custom-theme .mat-step-label{font-size:14px;font-weight:400}.ruc-custom-theme .mat-step-sub-label-error{font-weight:400}.ruc-custom-theme .mat-step-label-error{font-size:20px}.ruc-custom-theme .mat-step-label-selected{font-size:20px;font-weight:500}.ruc-custom-theme .mat-toolbar-multiple-rows{min-height:64px}.ruc-custom-theme .mat-toolbar-row,.ruc-custom-theme .mat-toolbar-single-row{height:64px}@media (max-width: 599px){.ruc-custom-theme .mat-toolbar-multiple-rows{min-height:56px}.ruc-custom-theme .mat-toolbar-row,.ruc-custom-theme .mat-toolbar-single-row{height:56px}}.ruc-custom-theme .mat-toolbar,.ruc-custom-theme .mat-toolbar h1,.ruc-custom-theme .mat-toolbar h2,.ruc-custom-theme .mat-toolbar h3,.ruc-custom-theme .mat-toolbar h4,.ruc-custom-theme .mat-toolbar h5,.ruc-custom-theme .mat-toolbar h6{font-size:20px;font-weight:500;line-height:32px;font-family:Roboto,sans-serif;letter-spacing:normal;margin:0}.ruc-custom-theme .mat-tree-node{min-height:48px}.ruc-custom-theme .mat-tree{font-family:Roboto,sans-serif}.ruc-custom-theme .mat-tree-node,.ruc-custom-theme .mat-nested-tree-node{font-weight:400;font-size:14px}.progress-container{position:relative;padding:5px}.progress-container.horizontal{width:100%}.progress-container.horizontal .progress-bar{width:100%;height:14%}.progress-container.vertical{width:60px;height:320px;margin:0 auto}.progress-container.vertical .progress-bar{width:24%;height:100%}.progress-label-container{z-index:2;width:100%;height:100%;pointer-events:none;display:flex}.progress-label-container.horizontal{justify-content:right;align-items:flex-end}.progress-label-container.vertical{justify-content:flex-start;align-items:flex-end;left:35px}.progress-label{margin:5px;font-size:12px;white-space:nowrap}.progress-label-container.horizontal .progress-label{margin-top:5px;margin-right:5px}.progress-label-container.vertical .progress-label{transform:rotate(-90deg);transform-origin:bottom left;margin-right:5px}.progress-bar{position:relative;border:1px solid #e0e0e0;border-radius:4px}.progress-bar .hover-label{position:absolute;top:-28px;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:.8em;z-index:5;white-space:nowrap;pointer-events:none}.progress-event-overlay{position:absolute;top:0;left:0;z-index:4}.progress{position:relative;background:#2196F3;transition:width .3s ease,height .3s ease}.progress-bar.horizontal .progress{width:100%;height:100%}.progress-bar.vertical .progress{width:100%;height:0}.icons-container{position:absolute;display:flex;justify-content:space-between;width:100%;height:100%;align-items:center}.icons-container i{position:absolute;font-size:1.2em;color:#fff}.start-icon{left:0}.end-icon{right:0}.above-threshold{color:gold}.categories-container{width:100%;box-sizing:border-box}.categories{display:flex;flex-direction:row;flex-wrap:wrap;gap:1px}.categories-block-top,.categories-block-bottom,.categories-block-left,.categories-block-right{position:absolute;z-index:1}.categories-block-top{bottom:100%;left:0;padding-bottom:8px}.categories-block-bottom{top:100%;left:0;padding-top:10px}.categories-block-left{right:100%;top:0;padding-right:8px;width:200px}.categories-block-left .categories{flex-direction:inherit;align-items:flex-start;gap:0px}.categories-block-right{left:100%;top:0;padding-left:8px;width:200px}.categories-block-right .categories{flex-direction:inherit;align-items:flex-start;gap:0px}.category{display:flex;align-items:center;gap:6px;padding:8px;border-radius:4px}.category-label{font-weight:500}.category-value{font-size:.9em}.category-color{width:10px;height:10px;border-radius:50%;overflow:hidden;flex-shrink:0}.category-icon-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.color-gradient{width:100%;height:100%}.categories.widget-style{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;align-items:flex-start;margin:10px 0}.categories.widget-style .widget-category{width:calc(25% - 7.5px);min-width:159px;box-sizing:border-box;flex-shrink:0;flex-grow:0}@media (max-width: 1200px){.categories.widget-style .widget-category{width:calc(33.33% - 6.66px)}}@media (max-width: 768px){.categories.widget-style .widget-category{width:calc(50% - 5px)}}@media (max-width: 480px){.categories.widget-style .widget-category{width:100%}}.categories-block-left,.categories-block-right{flex-direction:inherit;align-items:flex-start;gap:10px}.categories-block-left .widget-category,.categories-block-right .widget-category{width:100%;max-width:none}.widget-category{padding:10px 15px}.widget-content{display:flex;width:100%;align-items:center;margin:0}.widget-icon{border:1px solid #ddd;border-radius:10px;width:35px;height:35px;line-height:45px;text-align:center;background-color:#fdfdfd}.widget-content .category-color{margin-right:35px}.widget-icon,.widget-color{margin-right:8px;flex-shrink:0}.widget-color{width:24px;height:24px;border-radius:50%}.widget-label{flex-grow:1;text-align:left;display:block}.widget-value{font-weight:700;flex-shrink:0;margin-left:45px;text-align:left;margin-top:5px}.widget-icon-box{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RucMeteredProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-metered-progress-bar', template: "<div class=\"main\">\r\n<div class=\"progress-container\" class={{customTheme}} [class.vertical]=\"isVertical\" [class.horizontal]=\"!isVertical\">\r\n  <div *ngIf=\"rucInputData.barLabels\" class=\"progress-label-container {{rucInputData.orientation}}\">\r\n    <p class=\"progress-label\">{{progress | number:'1.0-0'}}% of {{rucInputData.max}} {{rucInputData.unitType}}\r\n      Used\r\n    </p>\r\n  </div>\r\n    \r\n  <div class=\"progress-bar\">\r\n    <!-- Removed (mouseenter) and (mouseleave) from progress-bar if only category hover is needed -->\r\n   \r\n    <!-- <mat-progress-bar> -->\r\n      <div class=\"progress\" [style.width]=\"isVertical ? '100%' : progress + '%'\"\r\n        [style.height]=\"isVertical ? progress + '%' : '100%'\"\r\n        [style.transition]=\"rucInputData.orientation === 'vertical' ? 'height 0.3s ease' : 'width 0.3s ease'\"\r\n        [ngStyle]=\"progressStyles\">\r\n        <!-- This div is now only for displaying the colored bar -->\r\n      </div>\r\n    <!-- </mat-progress-bar> -->\r\n    <!-- The hover label is now a sibling to .progress, positioned absolutely within .progress-bar -->\r\n    <div class=\"hover-label\" *ngIf=\"hoveredCategoryDetail\" [ngStyle]=\"hoverLabelStyle\">\r\n      {{hoveredCategoryDetail.category.label}}: {{hoveredCategoryDetail.percentageText}}\r\n    </div>\r\n    <!-- This overlay is now a sibling to .progress, sized to match it, to reliably capture mouse events -->\r\n    <div class=\"progress-event-overlay\" [style.width]=\"isVertical ? '100%' : progress + '%'\"\r\n      [style.height]=\"isVertical ? progress + '%' : '100%'\" (mousemove)=\"onProgressMouseMove($event)\"\r\n      (mouseleave)=\"onProgressMouseLeave()\"></div>\r\n  </div>\r\n  <div class=\"categories-container\" *ngIf=\"rucInputData.categories.length > 0\">\r\n    <div *ngIf=\"rucInputData.showCategoryLabels && rucInputData.categoryLabelStyle === 'basic'\" [ngClass]=\"{\r\n           'categories-block-top':    !isVertical && (rucInputData.categoryLabelsOrientation === 'top' || rucInputData.categoryLabelsOrientation === 'same'),\r\n           'categories-block-left':   isVertical && (rucInputData.categoryLabelsOrientation === 'left' || rucInputData.categoryLabelsOrientation === 'same'),\r\n           'categories-block-right':  isVertical && !(rucInputData.categoryLabelsOrientation === 'left' || rucInputData.categoryLabelsOrientation === 'same')\r\n         }\" class=\"categories\">\r\n      <div class=\"category\" *ngFor=\"let category of rucInputData.categories\" [style.color]=\"category.color\">\r\n        <ng-container *ngIf=\"category.icon !== undefined\">\r\n          <div *ngIf=\"category.icon; else colorDotBasic\" class=\"category-icon-wrapper\">\r\n            <i class=\"material-icons\" [style.color]=\"category.color\">{{ category.icon }}</i>\r\n          </div>\r\n          <ng-template #colorDotBasic>\r\n            <div class=\"category-color\">\r\n              <div class=\"color-gradient\"\r\n                [style.background]=\"category.color ? 'linear-gradient(to right, ' + category.color + ', ' + category.color + ')' : ''\">\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <span class=\"category-label\">{{category.label}}</span>\r\n        <p class=\"category-value\">({{(category.value / rucInputData.max * 100) | number:'1.0-0' }}%)</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"rucInputData.showCategoryLabels && rucInputData.categoryLabelStyle === 'widget'\"\r\n      class=\"categories widget-style\" [ngClass]=\"{\r\n           'categories-block-top':    !isVertical && (rucInputData.categoryLabelsOrientation === LablePositionEnums.top || rucInputData.categoryLabelsOrientation === LablePositionEnums.same),\r\n           'categories-block-left':   isVertical && (rucInputData.categoryLabelsOrientation === LablePositionEnums.left || rucInputData.categoryLabelsOrientation === LablePositionEnums.same),\r\n           'categories-block-right':  isVertical && !(rucInputData.categoryLabelsOrientation === LablePositionEnums.left || rucInputData.categoryLabelsOrientation === LablePositionEnums.same)\r\n         }\">\r\n      <ng-container *ngFor=\"let category of rucInputData.categories\">\r\n        <mat-card>\r\n          <div class=\"widget-category\">\r\n            <div class=\"widget-content\">\r\n              <div class=\"widget-icon-box\">\r\n                <ng-container *ngIf=\"category.icon !== undefined\">\r\n                  <div *ngIf=\"category.icon; else colorDotWidget\" class=\"widget-icon\">\r\n                    <i class=\"material-icons\" [style.color]=\"category.color\">{{ category.icon }}</i>\r\n                  </div>\r\n                  <ng-template #colorDotWidget>\r\n                    <div class=\"category-color\">\r\n                      <div class=\"color-gradient\"\r\n                        [style.background]=\"category.color ? 'linear-gradient(to right, ' + category.color + ', ' + category.color + ')' : ''\">\r\n                      </div>\r\n                    </div>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <div class=\"widget-label\">{{category.label}}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"widget-value\">\r\n              <div>{{category.value}}</div>\r\n            </div>\r\n          </div>\r\n        </mat-card>\r\n\r\n\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n</div>\r\n", styles: [".mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0,0,.2,1);transform:scale3d(0,0,0)}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{padding:2px 0!important;box-sizing:content-box!important;height:auto!important;overflow:hidden!important}textarea.cdk-textarea-autosize-measuring-firefox{padding:2px 0!important;box-sizing:content-box!important;height:0!important}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}.mat-focus-indicator{position:relative}.mat-focus-indicator:before{inset:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-focus-indicator-display, none);border:var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);border-radius:var(--mat-focus-indicator-border-radius, 4px)}.mat-focus-indicator:focus:before{content:\"\"}.cdk-high-contrast-active{--mat-focus-indicator-display: block}.mat-mdc-focus-indicator{position:relative}.mat-mdc-focus-indicator:before{inset:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-mdc-focus-indicator-display, none);border:var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);border-radius:var(--mat-mdc-focus-indicator-border-radius, 4px)}.mat-mdc-focus-indicator:focus:before{content:\"\"}.cdk-high-contrast-active{--mat-mdc-focus-indicator-display: block}.main{font-size:16px;font-weight:400;line-height:24px;font-family:Roboto,sans-serif;letter-spacing:.03125em}.ruc-custom-theme{font-size:14px;font-weight:400;line-height:20px;font-family:Roboto,sans-serif;letter-spacing:normal}.ruc-custom-theme .mat-mdc-option{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body1-font-size, 15px);line-height:var(--mdc-typography-body1-line-height, 24px);font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:var(--mdc-typography-body1-letter-spacing, normal)}.ruc-custom-theme .mat-mdc-card-title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-headline6-font-size, 20px);line-height:var(--mdc-typography-headline6-line-height, 32px);font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:var(--mdc-typography-headline6-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:var(--mdc-typography-headline6-text-transform, none)}.ruc-custom-theme .mat-mdc-card-subtitle{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle2-font-size, 20px);line-height:var(--mdc-typography-subtitle2-line-height, 24px);font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle2-text-transform, none)}.ruc-custom-theme .mat-mdc-tooltip{--mdc-plain-tooltip-supporting-text-font: Roboto, sans-serif;--mdc-plain-tooltip-supporting-text-size: 12px;--mdc-plain-tooltip-supporting-text-weight: 400;--mdc-plain-tooltip-supporting-text-tracking: normal}.ruc-custom-theme .mat-mdc-form-field-infix{min-height:56px}.ruc-custom-theme .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:28px}.ruc-custom-theme .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -34.75px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}.ruc-custom-theme .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:16px;padding-bottom:16px}.ruc-custom-theme .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix{padding-top:24px;padding-bottom:8px}.ruc-custom-theme .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix{padding-top:16px;padding-bottom:16px}.ruc-custom-theme .mdc-text-field__input,.ruc-custom-theme .mdc-text-field__affix{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none)}.ruc-custom-theme .mdc-text-field--textarea .mdc-text-field__input{line-height:1.5rem}.ruc-custom-theme .mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none)}.ruc-custom-theme .mat-mdc-form-field-subscript-wrapper,.ruc-custom-theme .mat-mdc-form-field-bottom-align:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-caption-font-size, 12px);line-height:var(--mdc-typography-caption-line-height, 20px);font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:var(--mdc-typography-caption-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:var(--mdc-typography-caption-text-transform, none)}.ruc-custom-theme .mat-mdc-form-field,.ruc-custom-theme .mat-mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body1-font-size, 15px);line-height:var(--mdc-typography-body1-line-height, 24px);font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:var(--mdc-typography-body1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:var(--mdc-typography-body1-text-transform, none)}.ruc-custom-theme .mat-mdc-form-field .mdc-text-field--outlined .mdc-floating-label--float-above{font-size:calc(15px * var(--mat-mdc-form-field-floating-label-scale, .75))}.ruc-custom-theme .mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:15px}.ruc-custom-theme .mat-mdc-select-panel{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);line-height:var(--mdc-typography-subtitle1-line-height, 28px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none);line-height:24px}.ruc-custom-theme .mat-mdc-select{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body1-font-size, 15px);line-height:var(--mdc-typography-body1-line-height, 24px);font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:var(--mdc-typography-body1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:var(--mdc-typography-body1-text-transform, none)}.ruc-custom-theme .mat-mdc-autocomplete-panel{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);line-height:var(--mdc-typography-subtitle1-line-height, 28px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none);line-height:24px}.ruc-custom-theme .mat-mdc-dialog-container{--mdc-dialog-subhead-font: Roboto, sans-serif;--mdc-dialog-subhead-line-height: 32px;--mdc-dialog-subhead-size: 20px;--mdc-dialog-subhead-weight: 500;--mdc-dialog-subhead-tracking: normal;--mdc-dialog-supporting-text-font: Roboto, sans-serif;--mdc-dialog-supporting-text-line-height: 24px;--mdc-dialog-supporting-text-size: 15px;--mdc-dialog-supporting-text-weight: 400;--mdc-dialog-supporting-text-tracking: normal}.ruc-custom-theme .mat-mdc-chip{height:32px}.ruc-custom-theme .mat-mdc-standard-chip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:var(--mdc-typography-body2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:var(--mdc-typography-body2-text-transform, none)}.ruc-custom-theme .mat-mdc-slide-toggle{--mdc-switch-state-layer-size: 48px}.ruc-custom-theme .mat-mdc-radio-button .mdc-radio{padding:10px}.ruc-custom-theme .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{top:-10px;left:-10px;width:40px;height:40px}.ruc-custom-theme .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control{top:0;right:0;left:0;width:40px;height:40px}.ruc-custom-theme .mat-mdc-slider{--mdc-slider-label-label-text-font: Roboto, sans-serif;--mdc-slider-label-label-text-size: 20px;--mdc-slider-label-label-text-line-height: 24px;--mdc-slider-label-label-text-tracking: normal;--mdc-slider-label-label-text-weight: 500}.ruc-custom-theme .mat-mdc-menu-content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle1-font-size, 16px);line-height:var(--mdc-typography-subtitle1-line-height, 28px);font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle1-text-transform, none);line-height:24px}.ruc-custom-theme .mat-mdc-menu-content,.ruc-custom-theme .mat-mdc-menu-content .mat-mdc-menu-item .mdc-list-item__primary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body1-font-size, 15px);line-height:var(--mdc-typography-body1-line-height, 24px);font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:var(--mdc-typography-body1-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:var(--mdc-typography-body1-text-transform, none)}.ruc-custom-theme .mat-mdc-list-base{--mdc-list-list-item-one-line-container-height: 48px;--mdc-list-list-item-two-line-container-height: 64px;--mdc-list-list-item-three-line-container-height: 88px}.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.ruc-custom-theme .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}.ruc-custom-theme .mat-mdc-list-base{--mdc-list-list-item-label-text-font: Roboto, sans-serif;--mdc-list-list-item-label-text-line-height: 24px;--mdc-list-list-item-label-text-size: 15px;--mdc-list-list-item-label-text-tracking: normal;--mdc-list-list-item-label-text-weight: 400;--mdc-list-list-item-supporting-text-font: Roboto, sans-serif;--mdc-list-list-item-supporting-text-line-height: 20px;--mdc-list-list-item-supporting-text-size: 14px;--mdc-list-list-item-supporting-text-tracking: normal;--mdc-list-list-item-supporting-text-weight: 400;--mdc-list-list-item-trailing-supporting-text-font: Roboto, sans-serif;--mdc-list-list-item-trailing-supporting-text-line-height: 20px;--mdc-list-list-item-trailing-supporting-text-size: 12px;--mdc-list-list-item-trailing-supporting-text-tracking: normal;--mdc-list-list-item-trailing-supporting-text-weight: 400}.ruc-custom-theme .mdc-list-group__subheader{font-size:16px;font-weight:400;line-height:28px;font-family:Roboto,sans-serif;letter-spacing:normal}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-form-field-infix{min-height:40px}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:20px}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -26.75px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}.ruc-custom-theme .mat-mdc-paginator .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label{display:none}.ruc-custom-theme .mat-mdc-paginator-container{min-height:56px}.ruc-custom-theme .mat-mdc-paginator{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-caption-font-size, 12px);line-height:var(--mdc-typography-caption-line-height, 20px);font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:var(--mdc-typography-caption-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:var(--mdc-typography-caption-text-transform, none)}.ruc-custom-theme .mat-mdc-paginator .mat-mdc-select-value{font-size:12px}.ruc-custom-theme .mat-mdc-tab-header .mdc-tab{height:48px}.ruc-custom-theme .mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-button-font-size, 20px);line-height:var(--mdc-typography-button-line-height, 60px);font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:var(--mdc-typography-button-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-button-text-decoration, none);text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:var(--mdc-typography-button-text-transform, none)}.ruc-custom-theme .mat-mdc-checkbox .mdc-checkbox{padding:calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2);margin:calc((var(--mdc-checkbox-touch-target-size, 40px) - 40px) / 2)}.ruc-custom-theme .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__background{top:calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2);left:calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2)}.ruc-custom-theme .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control{top:calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);right:calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);left:calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);width:var(--mdc-checkbox-touch-target-size, 40px);height:var(--mdc-checkbox-touch-target-size, 40px)}@media all and (-ms-high-contrast: none){.ruc-custom-theme .mdc-checkbox .mdc-checkbox__focus-ring{display:none}}.ruc-custom-theme .mdc-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:var(--mdc-typography-body2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:var(--mdc-typography-body2-text-transform, none)}.ruc-custom-theme .mat-mdc-button.mat-mdc-button-base,.ruc-custom-theme .mat-mdc-raised-button.mat-mdc-button-base,.ruc-custom-theme .mat-mdc-unelevated-button.mat-mdc-button-base,.ruc-custom-theme .mat-mdc-outlined-button.mat-mdc-button-base{height:36px}.ruc-custom-theme .mdc-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-button-font-size, 20px);line-height:var(--mdc-typography-button-line-height, 60px);font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:var(--mdc-typography-button-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-button-text-decoration, none);text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:var(--mdc-typography-button-text-transform, none)}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base{width:48px;height:48px;padding:12px}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base .mdc-icon-button__focus-ring{max-height:48px;max-width:48px}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button--reduced-size .mdc-icon-button__ripple{width:40px;height:40px;margin:4px}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button--reduced-size .mdc-icon-button__focus-ring{max-height:40px;max-width:40px}.ruc-custom-theme .mat-mdc-icon-button.mat-mdc-button-base .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}.ruc-custom-theme .mdc-fab--extended{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-button-font-size, 20px);line-height:var(--mdc-typography-button-line-height, 60px);font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:var(--mdc-typography-button-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-button-text-decoration, none);text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:var(--mdc-typography-button-text-transform, none)}.ruc-custom-theme .mat-mdc-snack-bar-container{--mdc-snackbar-supporting-text-font: Roboto, sans-serif;--mdc-snackbar-supporting-text-line-height: 20px;--mdc-snackbar-supporting-text-size: 14px;--mdc-snackbar-supporting-text-weight: 400}.ruc-custom-theme .mat-mdc-table .mdc-data-table__row{height:52px}.ruc-custom-theme .mat-mdc-table .mdc-data-table__pagination{min-height:52px}.ruc-custom-theme .mat-mdc-table .mdc-data-table__header-row{height:56px}.ruc-custom-theme .mdc-data-table__content,.ruc-custom-theme .mdc-data-table__cell{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:var(--mdc-typography-body2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:var(--mdc-typography-body2-text-transform, none)}.ruc-custom-theme .mdc-data-table__header-cell{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:var(--mdc-typography-subtitle2-font-size, 20px);line-height:var(--mdc-typography-subtitle2-line-height, 24px);font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, normal);-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:var(--mdc-typography-subtitle2-text-transform, none)}.ruc-custom-theme .mat-badge{position:relative}.ruc-custom-theme .mat-badge.mat-badge{overflow:visible}.ruc-custom-theme .mat-badge-hidden .mat-badge-content{display:none}.ruc-custom-theme .mat-badge-content{position:absolute;text-align:center;display:inline-block;border-radius:50%;transition:transform .2s ease-in-out;transform:scale(.6);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.ruc-custom-theme .ng-animate-disabled .mat-badge-content,.ruc-custom-theme .mat-badge-content._mat-animation-noopable{transition:none}.ruc-custom-theme .mat-badge-content.mat-badge-active{transform:none}.ruc-custom-theme .mat-badge-small .mat-badge-content{width:16px;height:16px;line-height:16px}.ruc-custom-theme .mat-badge-small.mat-badge-above .mat-badge-content{top:-8px}.ruc-custom-theme .mat-badge-small.mat-badge-below .mat-badge-content{bottom:-8px}.ruc-custom-theme .mat-badge-small.mat-badge-before .mat-badge-content{left:-16px}[dir=rtl] .ruc-custom-theme .mat-badge-small.mat-badge-before .mat-badge-content{left:auto;right:-16px}.ruc-custom-theme .mat-badge-small.mat-badge-after .mat-badge-content{right:-16px}[dir=rtl] .ruc-custom-theme .mat-badge-small.mat-badge-after .mat-badge-content{right:auto;left:-16px}.ruc-custom-theme .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-8px}[dir=rtl] .ruc-custom-theme .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-8px}.ruc-custom-theme .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-8px}[dir=rtl] .ruc-custom-theme .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-8px}.ruc-custom-theme .mat-badge-medium .mat-badge-content{width:22px;height:22px;line-height:22px}.ruc-custom-theme .mat-badge-medium.mat-badge-above .mat-badge-content{top:-11px}.ruc-custom-theme .mat-badge-medium.mat-badge-below .mat-badge-content{bottom:-11px}.ruc-custom-theme .mat-badge-medium.mat-badge-before .mat-badge-content{left:-22px}[dir=rtl] .ruc-custom-theme .mat-badge-medium.mat-badge-before .mat-badge-content{left:auto;right:-22px}.ruc-custom-theme .mat-badge-medium.mat-badge-after .mat-badge-content{right:-22px}[dir=rtl] .ruc-custom-theme .mat-badge-medium.mat-badge-after .mat-badge-content{right:auto;left:-22px}.ruc-custom-theme .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-11px}[dir=rtl] .ruc-custom-theme .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-11px}.ruc-custom-theme .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-11px}[dir=rtl] .ruc-custom-theme .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-11px}.ruc-custom-theme .mat-badge-large .mat-badge-content{width:28px;height:28px;line-height:28px}.ruc-custom-theme .mat-badge-large.mat-badge-above .mat-badge-content{top:-14px}.ruc-custom-theme .mat-badge-large.mat-badge-below .mat-badge-content{bottom:-14px}.ruc-custom-theme .mat-badge-large.mat-badge-before .mat-badge-content{left:-28px}[dir=rtl] .ruc-custom-theme .mat-badge-large.mat-badge-before .mat-badge-content{left:auto;right:-28px}.ruc-custom-theme .mat-badge-large.mat-badge-after .mat-badge-content{right:-28px}[dir=rtl] .ruc-custom-theme .mat-badge-large.mat-badge-after .mat-badge-content{right:auto;left:-28px}.ruc-custom-theme .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-14px}[dir=rtl] .ruc-custom-theme .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-14px}.ruc-custom-theme .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-14px}[dir=rtl] .ruc-custom-theme .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-14px}.ruc-custom-theme .mat-badge-content{font-weight:600;font-size:12px;font-family:Roboto,sans-serif}.ruc-custom-theme .mat-badge-small .mat-badge-content{font-size:9px}.ruc-custom-theme .mat-badge-large .mat-badge-content{font-size:24px}.ruc-custom-theme .mat-bottom-sheet-container{font-size:14px;font-weight:400;line-height:20px;font-family:Roboto,sans-serif;letter-spacing:normal}.ruc-custom-theme .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:48px}.ruc-custom-theme .mat-button-toggle{font-family:Roboto,sans-serif}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{width:40px;height:40px;padding:8px}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mdc-icon-button__focus-ring{max-height:40px;max-width:40px}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button--reduced-size .mdc-icon-button__ripple{width:40px;height:40px;margin:0}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button--reduced-size .mdc-icon-button__focus-ring{max-height:40px;max-width:40px}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mdc-icon-button__touch{position:absolute;top:50%;height:40px;left:50%;width:40px;transform:translate(-50%,-50%)}.ruc-custom-theme .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target{display:none}.ruc-custom-theme .mat-calendar{font-family:Roboto,sans-serif}.ruc-custom-theme .mat-calendar-body{font-size:13px}.ruc-custom-theme .mat-calendar-body-label,.ruc-custom-theme .mat-calendar-period-button{font-size:20px;font-weight:500}.ruc-custom-theme .mat-calendar-table-header th{font-size:11px;font-weight:400}.ruc-custom-theme .mat-expansion-panel-header{height:48px}.ruc-custom-theme .mat-expansion-panel-header.mat-expanded{height:64px}.ruc-custom-theme .mat-expansion-panel-header{font-family:Roboto,sans-serif;font-size:15px;font-weight:400}.ruc-custom-theme .mat-expansion-panel-content{font-size:14px;font-weight:400;line-height:20px;font-family:Roboto,sans-serif;letter-spacing:normal}.ruc-custom-theme .mat-grid-tile-header,.ruc-custom-theme .mat-grid-tile-footer{font-size:14px}.ruc-custom-theme .mat-grid-tile-header .mat-line,.ruc-custom-theme .mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.ruc-custom-theme .mat-grid-tile-header .mat-line:nth-child(n+2),.ruc-custom-theme .mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:12px}.ruc-custom-theme .mat-horizontal-stepper-header{height:72px}.ruc-custom-theme .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,.ruc-custom-theme .mat-vertical-stepper-header{padding:24px}.ruc-custom-theme .mat-stepper-vertical-line:before{top:-16px;bottom:-16px}.ruc-custom-theme .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:after,.ruc-custom-theme .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:before{top:36px}.ruc-custom-theme .mat-stepper-label-position-bottom .mat-stepper-horizontal-line{top:36px}.ruc-custom-theme .mat-stepper-vertical,.ruc-custom-theme .mat-stepper-horizontal{font-family:Roboto,sans-serif}.ruc-custom-theme .mat-step-label{font-size:14px;font-weight:400}.ruc-custom-theme .mat-step-sub-label-error{font-weight:400}.ruc-custom-theme .mat-step-label-error{font-size:20px}.ruc-custom-theme .mat-step-label-selected{font-size:20px;font-weight:500}.ruc-custom-theme .mat-toolbar-multiple-rows{min-height:64px}.ruc-custom-theme .mat-toolbar-row,.ruc-custom-theme .mat-toolbar-single-row{height:64px}@media (max-width: 599px){.ruc-custom-theme .mat-toolbar-multiple-rows{min-height:56px}.ruc-custom-theme .mat-toolbar-row,.ruc-custom-theme .mat-toolbar-single-row{height:56px}}.ruc-custom-theme .mat-toolbar,.ruc-custom-theme .mat-toolbar h1,.ruc-custom-theme .mat-toolbar h2,.ruc-custom-theme .mat-toolbar h3,.ruc-custom-theme .mat-toolbar h4,.ruc-custom-theme .mat-toolbar h5,.ruc-custom-theme .mat-toolbar h6{font-size:20px;font-weight:500;line-height:32px;font-family:Roboto,sans-serif;letter-spacing:normal;margin:0}.ruc-custom-theme .mat-tree-node{min-height:48px}.ruc-custom-theme .mat-tree{font-family:Roboto,sans-serif}.ruc-custom-theme .mat-tree-node,.ruc-custom-theme .mat-nested-tree-node{font-weight:400;font-size:14px}.progress-container{position:relative;padding:5px}.progress-container.horizontal{width:100%}.progress-container.horizontal .progress-bar{width:100%;height:14%}.progress-container.vertical{width:60px;height:320px;margin:0 auto}.progress-container.vertical .progress-bar{width:24%;height:100%}.progress-label-container{z-index:2;width:100%;height:100%;pointer-events:none;display:flex}.progress-label-container.horizontal{justify-content:right;align-items:flex-end}.progress-label-container.vertical{justify-content:flex-start;align-items:flex-end;left:35px}.progress-label{margin:5px;font-size:12px;white-space:nowrap}.progress-label-container.horizontal .progress-label{margin-top:5px;margin-right:5px}.progress-label-container.vertical .progress-label{transform:rotate(-90deg);transform-origin:bottom left;margin-right:5px}.progress-bar{position:relative;border:1px solid #e0e0e0;border-radius:4px}.progress-bar .hover-label{position:absolute;top:-28px;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:.8em;z-index:5;white-space:nowrap;pointer-events:none}.progress-event-overlay{position:absolute;top:0;left:0;z-index:4}.progress{position:relative;background:#2196F3;transition:width .3s ease,height .3s ease}.progress-bar.horizontal .progress{width:100%;height:100%}.progress-bar.vertical .progress{width:100%;height:0}.icons-container{position:absolute;display:flex;justify-content:space-between;width:100%;height:100%;align-items:center}.icons-container i{position:absolute;font-size:1.2em;color:#fff}.start-icon{left:0}.end-icon{right:0}.above-threshold{color:gold}.categories-container{width:100%;box-sizing:border-box}.categories{display:flex;flex-direction:row;flex-wrap:wrap;gap:1px}.categories-block-top,.categories-block-bottom,.categories-block-left,.categories-block-right{position:absolute;z-index:1}.categories-block-top{bottom:100%;left:0;padding-bottom:8px}.categories-block-bottom{top:100%;left:0;padding-top:10px}.categories-block-left{right:100%;top:0;padding-right:8px;width:200px}.categories-block-left .categories{flex-direction:inherit;align-items:flex-start;gap:0px}.categories-block-right{left:100%;top:0;padding-left:8px;width:200px}.categories-block-right .categories{flex-direction:inherit;align-items:flex-start;gap:0px}.category{display:flex;align-items:center;gap:6px;padding:8px;border-radius:4px}.category-label{font-weight:500}.category-value{font-size:.9em}.category-color{width:10px;height:10px;border-radius:50%;overflow:hidden;flex-shrink:0}.category-icon-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.color-gradient{width:100%;height:100%}.categories.widget-style{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;align-items:flex-start;margin:10px 0}.categories.widget-style .widget-category{width:calc(25% - 7.5px);min-width:159px;box-sizing:border-box;flex-shrink:0;flex-grow:0}@media (max-width: 1200px){.categories.widget-style .widget-category{width:calc(33.33% - 6.66px)}}@media (max-width: 768px){.categories.widget-style .widget-category{width:calc(50% - 5px)}}@media (max-width: 480px){.categories.widget-style .widget-category{width:100%}}.categories-block-left,.categories-block-right{flex-direction:inherit;align-items:flex-start;gap:10px}.categories-block-left .widget-category,.categories-block-right .widget-category{width:100%;max-width:none}.widget-category{padding:10px 15px}.widget-content{display:flex;width:100%;align-items:center;margin:0}.widget-icon{border:1px solid #ddd;border-radius:10px;width:35px;height:35px;line-height:45px;text-align:center;background-color:#fdfdfd}.widget-content .category-color{margin-right:35px}.widget-icon,.widget-color{margin-right:8px;flex-shrink:0}.widget-color{width:24px;height:24px;border-radius:50%}.widget-label{flex-grow:1;text-align:left;display:block}.widget-value{font-weight:700;flex-shrink:0;margin-left:45px;text-align:left;margin-top:5px}.widget-icon-box{display:flex;align-items:center}\n"] }]
+        }], propDecorators: { rucInputData: [{
+                type: Input
+            }], customTheme: [{
+                type: Input
+            }] } });
+
+class RuclibMeteredProgressBarModule {
+}
+RuclibMeteredProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibMeteredProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RuclibMeteredProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibMeteredProgressBarModule, declarations: [RucMeteredProgressBarComponent], imports: [CommonModule, MatIconModule, MatCardModule], exports: [RucMeteredProgressBarComponent] });
+RuclibMeteredProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibMeteredProgressBarModule, imports: [CommonModule, MatIconModule, MatCardModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibMeteredProgressBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, MatIconModule, MatCardModule],
+                    declarations: [RucMeteredProgressBarComponent],
+                    exports: [RucMeteredProgressBarComponent],
+                }]
+        }] });
+
+class MeteredBarConfig {
+}
+class CategoryConfig {
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CategoryConfig, MeteredBarConfig, RucMeteredProgressBarComponent, RuclibMeteredProgressBarModule };
+//# sourceMappingURL=ruc-lib-metered-progress-bar.mjs.map

package/fesm2015/ruc-lib-metered-progress-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ruc-lib-metered-progress-bar.mjs","sources":["../../src/lib/enums/lable-position.enum.ts","../../src/lib/ruc-metered-progress-bar/ruc-metered-progress-bar.component.ts","../../src/lib/ruc-metered-progress-bar/ruc-metered-progress-bar.component.html","../../src/lib/ruclib-metered-progress-bar.module.ts","../../src/lib/model/metered-bar.config.ts","../../src/ruc-lib-metered-progress-bar.ts"],"sourcesContent":["export enum LablePositionEnums {\r\n    left = \"left\",\r\n    right = \"right\",\r\n    same = \"same\",\r\n    top = \"top\",\r\n    bottom = 'bottom'\r\n}\r\n","import { Component, Input } from '@angular/core';\r\nimport { CategoryConfig, MeteredBarConfig } from '../model/metered-bar.config';\r\nimport { LablePositionEnums } from '../enums/lable-position.enum';\r\n\r\n\r\n@Component({\r\n  selector: 'uxp-ruclib-metered-progress-bar',\r\n  templateUrl: './ruc-metered-progress-bar.component.html',\r\n  styleUrls: ['./ruc-metered-progress-bar.component.scss'],\r\n})\r\n\r\n\r\nexport class RucMeteredProgressBarComponent {\r\n  @Input() rucInputData!: MeteredBarConfig;\r\n  @Input() customTheme!: string;\r\n  hoveredCategoryDetail: { category: CategoryConfig, percentageText: string } | null = null;\r\n  hoverLabelStyle: { left: string; top: string; display: string; transform: string; } = { left: '0px', top: '-28px', display: 'none', transform: 'translateX(-50%)' };\r\n  progressPercentage = 0;\r\n  /**\r\n   * Calculates the total value of all categories.\r\n   * @returns The sum of all category values.\r\n   */\r\n  get totalValue(): number {\r\n    return this.rucInputData.categories.reduce((sum, category) => sum + category.value, 0);\r\n  }\r\n\r\n  /**\r\n   * Calculates the overall progress percentage of the bar based on total value, min, and max.\r\n   * @returns The progress as a percentage (0-100).\r\n   */\r\n  get progress(): number {\r\n    return ((this.totalValue - this.rucInputData.min) / (this.rucInputData.max - this.rucInputData.min)) * 100;\r\n  }\r\n\r\n  /**\r\n   * Determines if the progress bar is oriented vertically.\r\n   * @returns True if the orientation is 'vertical', false otherwise.\r\n   */\r\n  get isVertical(): boolean {\r\n    return this.rucInputData.orientation === 'vertical';\r\n  }\r\n\r\n  /**\r\n   * Generates the CSS linear-gradient string for the progress bar.\r\n   * The gradient is composed of segments based on category values and colors.\r\n   * If no categories or total value is zero, it returns a transparent gradient.\r\n   * @returns A CSS linear-gradient string.\r\n   */\r\n  get progressStyles(): { [key: string]: string } {\r\n    const direction = this.isVertical ? 'to bottom' : 'to right';\r\n\r\n    if (!this.rucInputData || !this.rucInputData.categories) {\r\n      return { background: 'transparent' };\r\n    }\r\n\r\n    const total = this.totalValue;\r\n    const colorStops: string[] = [];\r\n    let cumulativePercentage = 0;\r\n\r\n    if (total > 0) {\r\n      this.rucInputData.categories.forEach(category => {\r\n        if (category.value <= 0) return; // Skip categories with zero or negative contribution\r\n\r\n        const segmentPercentage = (category.value / total) * 100;\r\n        const color = category.color;\r\n\r\n        // Add start of the segment using the previous cumulative percentage\r\n        colorStops.push(`${color} ${cumulativePercentage}%`);\r\n\r\n        // Update cumulative percentage for the end of this segment\r\n        cumulativePercentage += segmentPercentage;\r\n\r\n        // Add end of the segment\r\n        // Use Math.min to cap at 100% in case of floating point overshoot on the last segment\r\n        colorStops.push(`${color} ${Math.min(cumulativePercentage, 100)}%`);\r\n      });\r\n    }\r\n\r\n    if (colorStops.length === 0) {\r\n      return { background: 'transparent' };\r\n    }\r\n\r\n    const baseGradient = `linear-gradient(${direction}, ${colorStops.join(', ')})`;\r\n    const styles: { [key: string]: string } = {};\r\n    const barStyle = this.rucInputData?.barStyle;\r\n\r\n    switch (barStyle) {\r\n      case 'stripe':\r\n        // This uses multiple backgrounds for an overlay effect, as requested.\r\n        styles['background'] = `repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0, 0, 0, 0.1) 5px, rgba(0, 0, 0, 0.1) 10px), ${baseGradient}`;\r\n        break;\r\n      case 'circle': {\r\n        // This uses a mask. The background is the color, the mask cuts out the shape.\r\n        styles['background'] = baseGradient;\r\n        // A repeating pattern of circles. Each circle has a diameter of 8px, with a 4px gap.\r\n        const circleMask = 'radial-gradient(circle, black 4px, transparent 4px) 0 0 / 12px 12px';\r\n        styles['-webkit-mask'] = circleMask;\r\n        styles['mask'] = circleMask;\r\n        break;\r\n      }\r\n      case 'rectangle': {\r\n        styles['background'] = baseGradient;\r\n        // For vertical bar, create horizontal rectangles (0deg). For horizontal bar, create vertical rectangles (90deg).\r\n        const rectDirection = this.isVertical ? '0deg' : '90deg';\r\n        // A repeating pattern of bars. Each bar is 6px wide with a 6px gap.\r\n        const rectangleMask = `repeating-linear-gradient(${rectDirection}, black, black 6px, transparent 6px, transparent 12px)`;\r\n        styles['-webkit-mask'] = rectangleMask;\r\n        styles['mask'] = rectangleMask;\r\n        break;\r\n      }\r\n      default: // 'solid' or undefined\r\n        styles['background'] = baseGradient;\r\n        break;\r\n    }\r\n    return styles;\r\n  }\r\n  /**\r\n   * Handles mouse movement over the progress bar to display category-specific hover details.\r\n   * It calculates the hovered segment based on mouse position and updates the hover label.\r\n   * @param event The MouseEvent object.\r\n   */\r\n  onProgressMouseMove(event: MouseEvent): void {\r\n    const progressBarElement = event.target as HTMLElement;\r\n    let currentCumulativeGradientPct = 0;\r\n    let foundCategoryForHover: CategoryConfig | null = null;\r\n    let hoverPercentage_onFilledBar = 0;\r\n    let mousePositionWithinProgressDiv = 0;\r\n\r\n    if (this.isVertical) {\r\n      mousePositionWithinProgressDiv = event.offsetY; // Y position within the .progress div\r\n      const filledHeightPx = progressBarElement.offsetHeight;\r\n      if (filledHeightPx <= 0) { // Avoid division by zero if element has no height\r\n        this.onProgressMouseLeave();\r\n        return;\r\n      }\r\n      hoverPercentage_onFilledBar = (mousePositionWithinProgressDiv / filledHeightPx) * 100;\r\n    } else { // Horizontal\r\n      mousePositionWithinProgressDiv = event.offsetX; // X position within the .progress div\r\n      const filledWidthPx = progressBarElement.offsetWidth;\r\n      if (filledWidthPx <= 0) { // Avoid division by zero if element has no width\r\n        this.onProgressMouseLeave();\r\n        return;\r\n      }\r\n      hoverPercentage_onFilledBar = (mousePositionWithinProgressDiv / filledWidthPx) * 100;\r\n    }\r\n\r\n    if (this.totalValue > 0) {\r\n      for (const category of this.rucInputData.categories) {\r\n        if (category.value <= 0) continue; // Skip categories with zero or negative contribution\r\n\r\n        const segmentGradientPct = (category.value / this.totalValue) * 100;\r\n        const segmentStartGradientPct = currentCumulativeGradientPct;\r\n        const segmentEndGradientPct = currentCumulativeGradientPct + segmentGradientPct;\r\n\r\n        // Ensure hoverPercentage is within the segment, handling potential floating point inaccuracies for the last segment\r\n        if (hoverPercentage_onFilledBar >= segmentStartGradientPct && // Check if mouse is within or at the start of the segment\r\n          (hoverPercentage_onFilledBar < segmentEndGradientPct ||\r\n            (segmentEndGradientPct >= 99.99 && hoverPercentage_onFilledBar <= 100.01))) { // Tolerate slight overshoot for last segment\r\n          foundCategoryForHover = category;\r\n          break;\r\n        }\r\n        currentCumulativeGradientPct = segmentEndGradientPct;\r\n      }\r\n    }\r\n\r\n    if (foundCategoryForHover) {\r\n      const percentageOfMax = (foundCategoryForHover.value / this.rucInputData.max) * 100; // Calculate percentage relative to max value\r\n      this.hoveredCategoryDetail = { category: foundCategoryForHover, percentageText: percentageOfMax.toFixed(0) + '%' };\r\n      if (this.isVertical) {\r\n        this.hoverLabelStyle = {\r\n          left: 'calc(100% + 5px)', // Position to the right of the vertical bar\r\n          top: mousePositionWithinProgressDiv + 'px',\r\n          display: 'block',\r\n          transform: 'translateY(-50%)' // Vertically center label on mouse Y\r\n        };\r\n      } else {\r\n        this.hoverLabelStyle = {\r\n          left: mousePositionWithinProgressDiv + 'px',\r\n          top: '-28px', // Position above horizontal bar\r\n          display: 'block',\r\n          transform: 'translateX(-50%)' // Horizontally center label on mouse X\r\n        };\r\n      }\r\n    } else {\r\n      this.hoveredCategoryDetail = null;\r\n      this.hoverLabelStyle = { ...this.hoverLabelStyle, display: 'none' };\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Hides the hover label when the mouse leaves the progress bar.\r\n   */\r\n  onProgressMouseLeave(): void {\r\n    this.hoveredCategoryDetail = null;\r\n    this.hoverLabelStyle = { ...this.hoverLabelStyle, display: 'none' };\r\n  }\r\n  /**\r\n   * get the label position  string value\r\n     */\r\n  public get LablePositionEnums(): typeof LablePositionEnums {\r\n    return LablePositionEnums;\r\n  }\r\n}\r\n","<div class=\"main\">\r\n<div class=\"progress-container\" class={{customTheme}} [class.vertical]=\"isVertical\" [class.horizontal]=\"!isVertical\">\r\n  <div *ngIf=\"rucInputData.barLabels\" class=\"progress-label-container {{rucInputData.orientation}}\">\r\n    <p class=\"progress-label\">{{progress | number:'1.0-0'}}% of {{rucInputData.max}} {{rucInputData.unitType}}\r\n      Used\r\n    </p>\r\n  </div>\r\n    \r\n  <div class=\"progress-bar\">\r\n    <!-- Removed (mouseenter) and (mouseleave) from progress-bar if only category hover is needed -->\r\n   \r\n    <!-- <mat-progress-bar> -->\r\n      <div class=\"progress\" [style.width]=\"isVertical ? '100%' : progress + '%'\"\r\n        [style.height]=\"isVertical ? progress + '%' : '100%'\"\r\n        [style.transition]=\"rucInputData.orientation === 'vertical' ? 'height 0.3s ease' : 'width 0.3s ease'\"\r\n        [ngStyle]=\"progressStyles\">\r\n        <!-- This div is now only for displaying the colored bar -->\r\n      </div>\r\n    <!-- </mat-progress-bar> -->\r\n    <!-- The hover label is now a sibling to .progress, positioned absolutely within .progress-bar -->\r\n    <div class=\"hover-label\" *ngIf=\"hoveredCategoryDetail\" [ngStyle]=\"hoverLabelStyle\">\r\n      {{hoveredCategoryDetail.category.label}}: {{hoveredCategoryDetail.percentageText}}\r\n    </div>\r\n    <!-- This overlay is now a sibling to .progress, sized to match it, to reliably capture mouse events -->\r\n    <div class=\"progress-event-overlay\" [style.width]=\"isVertical ? '100%' : progress + '%'\"\r\n      [style.height]=\"isVertical ? progress + '%' : '100%'\" (mousemove)=\"onProgressMouseMove($event)\"\r\n      (mouseleave)=\"onProgressMouseLeave()\"></div>\r\n  </div>\r\n  <div class=\"categories-container\" *ngIf=\"rucInputData.categories.length > 0\">\r\n    <div *ngIf=\"rucInputData.showCategoryLabels && rucInputData.categoryLabelStyle === 'basic'\" [ngClass]=\"{\r\n           'categories-block-top':    !isVertical && (rucInputData.categoryLabelsOrientation === 'top' || rucInputData.categoryLabelsOrientation === 'same'),\r\n           'categories-block-left':   isVertical && (rucInputData.categoryLabelsOrientation === 'left' || rucInputData.categoryLabelsOrientation === 'same'),\r\n           'categories-block-right':  isVertical && !(rucInputData.categoryLabelsOrientation === 'left' || rucInputData.categoryLabelsOrientation === 'same')\r\n         }\" class=\"categories\">\r\n      <div class=\"category\" *ngFor=\"let category of rucInputData.categories\" [style.color]=\"category.color\">\r\n        <ng-container *ngIf=\"category.icon !== undefined\">\r\n          <div *ngIf=\"category.icon; else colorDotBasic\" class=\"category-icon-wrapper\">\r\n            <i class=\"material-icons\" [style.color]=\"category.color\">{{ category.icon }}</i>\r\n          </div>\r\n          <ng-template #colorDotBasic>\r\n            <div class=\"category-color\">\r\n              <div class=\"color-gradient\"\r\n                [style.background]=\"category.color ? 'linear-gradient(to right, ' + category.color + ', ' + category.color + ')' : ''\">\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <span class=\"category-label\">{{category.label}}</span>\r\n        <p class=\"category-value\">({{(category.value / rucInputData.max * 100) | number:'1.0-0' }}%)</p>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"rucInputData.showCategoryLabels && rucInputData.categoryLabelStyle === 'widget'\"\r\n      class=\"categories widget-style\" [ngClass]=\"{\r\n           'categories-block-top':    !isVertical && (rucInputData.categoryLabelsOrientation === LablePositionEnums.top || rucInputData.categoryLabelsOrientation === LablePositionEnums.same),\r\n           'categories-block-left':   isVertical && (rucInputData.categoryLabelsOrientation === LablePositionEnums.left || rucInputData.categoryLabelsOrientation === LablePositionEnums.same),\r\n           'categories-block-right':  isVertical && !(rucInputData.categoryLabelsOrientation === LablePositionEnums.left || rucInputData.categoryLabelsOrientation === LablePositionEnums.same)\r\n         }\">\r\n      <ng-container *ngFor=\"let category of rucInputData.categories\">\r\n        <mat-card>\r\n          <div class=\"widget-category\">\r\n            <div class=\"widget-content\">\r\n              <div class=\"widget-icon-box\">\r\n                <ng-container *ngIf=\"category.icon !== undefined\">\r\n                  <div *ngIf=\"category.icon; else colorDotWidget\" class=\"widget-icon\">\r\n                    <i class=\"material-icons\" [style.color]=\"category.color\">{{ category.icon }}</i>\r\n                  </div>\r\n                  <ng-template #colorDotWidget>\r\n                    <div class=\"category-color\">\r\n                      <div class=\"color-gradient\"\r\n                        [style.background]=\"category.color ? 'linear-gradient(to right, ' + category.color + ', ' + category.color + ')' : ''\">\r\n                      </div>\r\n                    </div>\r\n                  </ng-template>\r\n                </ng-container>\r\n                <div class=\"widget-label\">{{category.label}}</div>\r\n              </div>\r\n            </div>\r\n            <div class=\"widget-value\">\r\n              <div>{{category.value}}</div>\r\n            </div>\r\n          </div>\r\n        </mat-card>\r\n\r\n\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { RucMeteredProgressBarComponent } from './ruc-metered-progress-bar/ruc-metered-progress-bar.component';\r\nimport { MatCardModule } from '@angular/material/card';\r\n\r\n\r\n@NgModule({\r\n  imports: [CommonModule,MatIconModule,MatCardModule],\r\n  declarations: [RucMeteredProgressBarComponent],\r\n  exports: [RucMeteredProgressBarComponent],\r\n})\r\nexport class RuclibMeteredProgressBarModule {}\r\n","export class MeteredBarConfig {\r\n    min!: number;\r\n    max!: number;\r\n    orientation!: string;\r\n    barLabels!: boolean;\r\n    barStyle?: 'solid' | 'stripe' | 'circle' | 'rectangle';\r\n    categoryLabelsOrientation!: string;\r\n    categoryLabelStyle?: string;\r\n    showCategoryLabels?: boolean;\r\n    categories!: CategoryConfig[];\r\n    unitType?: string\r\n}\r\n\r\nexport class CategoryConfig {\r\n    label!: string;\r\n    color!: string;\r\n    value!: number;\r\n    icon?: string;\r\n    handler?: (event?: any) => void;\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}