@sme.up/ketchup 9.0.0 → 9.1.0

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupDataTable_instances, _KupDataTable_initialized, _KupDataTable_rows, _KupDataTable_rowsLength, _KupDataTable_paginatedRows, _KupDataTable_paginatedRowsLength, _KupDataTable_footer, _KupDataTable_kupManager, _KupDataTable_renderedRows, _KupDataTable_loadMoreEventCounter, _KupDataTable_loadMoreEventPreviousQuantity, _KupDataTable_theadRef, _KupDataTable_tableRef, _KupDataTable_originalData, _KupDataTable_tableAreaRef, _KupDataTable_stickyTheadRef, _KupDataTable_customizeTopButtonRef, _KupDataTable_customizeTopPanelRef, _KupDataTable_sizedColumns, _KupDataTable_intObserver, _KupDataTable_navBarHeight, _KupDataTable_theadIntersecting, _KupDataTable_tableIntersecting, _KupDataTable_isSafariBrowser, _KupDataTable_isRestoringState, _KupDataTable_globalFilterTimeout, _KupDataTable_totalMenuCoords, _KupDataTable_clickTimeout, _KupDataTable_thRefs, _KupDataTable_rowsRefs, _KupDataTable_oldWidth, _KupDataTable_hold, _KupDataTable_interactableDrag, _KupDataTable_interactableDrop, _KupDataTable_interactableResize, _KupDataTable_interactableTouch, _KupDataTable_dropareaRef, _KupDataTable_removeDropareaRef, _KupDataTable_groupsDropareaRef, _KupDataTable_clickCb, _KupDataTable_clickCbCustomPanel, _KupDataTable_clickCbDropCard, _KupDataTable_resizeTimeout, _KupDataTable_columnMenuInstance, _KupDataTable_filtersColumnMenuInstance, _KupDataTable_filtersRowsInstance, _KupDataTable_detailCard, _KupDataTable_insertCard, _KupDataTable_confirmDeleteCard, _KupDataTable_confirmDeleteDialog, _KupDataTable_columnMenuCard, _KupDataTable_columnDropCard, _KupDataTable_columnDropCardAnchor, _KupDataTable_insertCount, _KupDataTable_BUTTON_CANCEL_ID, _KupDataTable_BUTTON_SUBMIT_ID, _KupDataTable_FIELDS_FORM_ID, _KupDataTable_MESSAGE_ID, _KupDataTable_MESSAGE_WRAPPER_ID, _KupDataTable_INSERT_PREFIX, _KupDataTable_closeDropCard, _KupDataTable_createDropCard, _KupDataTable_calculateData, _KupDataTable_getRow, _KupDataTable_getTransposedData, _KupDataTable_setTransposedData, _KupDataTable_switchToTotalsMatrix, _KupDataTable_setObjForTotalsMatrix, _KupDataTable_stickyHeaderPosition, _KupDataTable_updateStickyHeaderSize, _KupDataTable_setObserver, _KupDataTable_didLoadInteractables, _KupDataTable_didRenderInteractables, _KupDataTable_didLoadObservers, _KupDataTable_didRenderObservers, _KupDataTable_didLoadEventHandling, _KupDataTable_scrollStickyHeader, _KupDataTable_checkScrollOnHover, _KupDataTable_customizePanelPosition, _KupDataTable_rowsPointLength, _KupDataTable_paginatedRowsPointLength, _KupDataTable__rowsLength, _KupDataTable_setDynPosElements, _KupDataTable_resetSelectedRows, _KupDataTable_getSizedColumns, _KupDataTable_rowDetail, _KupDataTable_rowInsertForm, _KupDataTable_rowsDelete, _KupDataTable_getEventDetails, _KupDataTable_clickHandler, _KupDataTable_contextMenuHandler, _KupDataTable_dblClickHandler, _KupDataTable_initRows, _KupDataTable_filterRows, _KupDataTable_isGrouping, _KupDataTable_hasRowActions, _KupDataTable_removeGroup, _KupDataTable_hasTotals, _KupDataTable_tableHasAutoWidth, _KupDataTable_forceGroupExpansion, _KupDataTable_forceRowGroupExpansion, _KupDataTable_adjustPaginator, _KupDataTable_composeFixedCellStyleAndClass, _KupDataTable_updateFixedRowsAndColumnsCssVariables, _KupDataTable_onColumnSort, _KupDataTable_onRemoveFilter, _KupDataTable_getFilterValueForTooltip, _KupDataTable_onGlobalFilterChange, _KupDataTable_handlePageChange, _KupDataTable_handleRowsPerPageChange, _KupDataTable_onRowClick, _KupDataTable_selectColumn, _KupDataTable_deselectColumn, _KupDataTable_onDefaultRowActionClick, _KupDataTable_onRowActionExpanderClick, _KupDataTable_handleRowSelect, _KupDataTable_onRowExpand, _KupDataTable_onSelectAll, _KupDataTable_openTotalMenu, _KupDataTable_closeTotalMenu, _KupDataTable_isOpenedTotalMenuForColumn, _KupDataTable_groupRows, _KupDataTable_onLoadMoreClick, _KupDataTable_adjustGroupState, _KupDataTable_adjustGroupStateFromRow, _KupDataTable_sortRows, _KupDataTable_getSortIcon, _KupDataTable_getSortDecode, _KupDataTable_calculateColspan, _KupDataTable_isGroupExpanded, _KupDataTable_handleColumnSort, _KupDataTable_moveSortedColumns, _KupDataTable_applyLineBreaks, _KupDataTable_composeHeaderCellClassAndStyle, _KupDataTable_renderHeader, _KupDataTable_renderStickyHeader, _KupDataTable_totalMenuPosition, _KupDataTable_onTotalMenuOpen, _KupDataTable_renderRow, _KupDataTable_renderActions, _KupDataTable_onCustomSettingsClick, _KupDataTable_openCustomSettings, _KupDataTable_closeCustomSettings, _KupDataTable_renderPaginator, _KupDataTable_columnRemoveArea, _KupDataTable_columnGroupArea, _KupDataTable_hideShowColumnDropArea, _KupDataTable_handleColumnGroup, _KupDataTable_transcodeItem, _KupDataTable_createListData, _KupDataTable_FONTSIZE_CODES, _KupDataTable_FONTSIZE_DECODES, _KupDataTable_FONTSIZE_ICONS, _KupDataTable_getFontSizeCodeFromDecode, _KupDataTable_renderFontSizePanel, _KupDataTable_DENSITY_DECODES, _KupDataTable_DENSITY_ICONS, _KupDataTable_getDensityCodeFromDecode, _KupDataTable_renderDensityPanel, _KupDataTable_GRID_CODES, _KupDataTable_GRID_DECODES, _KupDataTable_GRID_ICONS, _KupDataTable_getGridCodeFromDecode, _KupDataTable_renderTransposeSwitch, _KupDataTable_renderTotalsMatrix, _KupDataTable_renderGridPanel;
+var _KupDataTable_instances, _KupDataTable_initialized, _KupDataTable_rows, _KupDataTable_rowsLength, _KupDataTable_paginatedRows, _KupDataTable_paginatedRowsLength, _KupDataTable_footer, _KupDataTable_kupManager, _KupDataTable_renderedRows, _KupDataTable_loadMoreEventCounter, _KupDataTable_loadMoreEventPreviousQuantity, _KupDataTable_theadRef, _KupDataTable_tableRef, _KupDataTable_originalData, _KupDataTable_tableAreaRef, _KupDataTable_stickyTheadRef, _KupDataTable_customizeTopButtonRef, _KupDataTable_customizeTopPanelRef, _KupDataTable_sizedColumns, _KupDataTable_intObserver, _KupDataTable_navBarHeight, _KupDataTable_theadIntersecting, _KupDataTable_tableIntersecting, _KupDataTable_isSafariBrowser, _KupDataTable_isRestoringState, _KupDataTable_globalFilterTimeout, _KupDataTable_totalMenuCoords, _KupDataTable_clickTimeout, _KupDataTable_thRefs, _KupDataTable_rowsRefs, _KupDataTable_oldWidth, _KupDataTable_hold, _KupDataTable_interactableDrag, _KupDataTable_interactableDrop, _KupDataTable_interactableResize, _KupDataTable_interactableTouch, _KupDataTable_dropareaRef, _KupDataTable_removeDropareaRef, _KupDataTable_groupsDropareaRef, _KupDataTable_clickCb, _KupDataTable_clickCbCustomPanel, _KupDataTable_clickCbDropCard, _KupDataTable_resizeTimeout, _KupDataTable_columnMenuInstance, _KupDataTable_filtersColumnMenuInstance, _KupDataTable_filtersRowsInstance, _KupDataTable_detailCard, _KupDataTable_insertCard, _KupDataTable_confirmDeleteCard, _KupDataTable_confirmDeleteDialog, _KupDataTable_columnMenuCard, _KupDataTable_columnDropCard, _KupDataTable_columnDropCardAnchor, _KupDataTable_insertCount, _KupDataTable_BUTTON_CANCEL_ID, _KupDataTable_BUTTON_SUBMIT_ID, _KupDataTable_FIELDS_FORM_ID, _KupDataTable_MESSAGE_ID, _KupDataTable_MESSAGE_WRAPPER_ID, _KupDataTable_INSERT_PREFIX, _KupDataTable_closeDropCard, _KupDataTable_createDropCard, _KupDataTable_calculateData, _KupDataTable_getRow, _KupDataTable__getRow, _KupDataTable_getTransposedData, _KupDataTable_setTransposedData, _KupDataTable_switchToTotalsMatrix, _KupDataTable_setObjForTotalsMatrix, _KupDataTable_stickyHeaderPosition, _KupDataTable_updateStickyHeaderSize, _KupDataTable_setObserver, _KupDataTable_didLoadInteractables, _KupDataTable_didRenderInteractables, _KupDataTable_didLoadObservers, _KupDataTable_didRenderObservers, _KupDataTable_didLoadEventHandling, _KupDataTable_scrollStickyHeader, _KupDataTable_checkScrollOnHover, _KupDataTable_customizePanelPosition, _KupDataTable_rowsPointLength, _KupDataTable_paginatedRowsPointLength, _KupDataTable__rowsLength, _KupDataTable_setDynPosElements, _KupDataTable_resetSelectedRows, _KupDataTable_getSizedColumns, _KupDataTable_rowDetail, _KupDataTable_rowInsertForm, _KupDataTable_rowsDelete, _KupDataTable_getEventDetails, _KupDataTable_clickHandler, _KupDataTable_contextMenuHandler, _KupDataTable_dblClickHandler, _KupDataTable_initRows, _KupDataTable_filterRows, _KupDataTable_isGrouping, _KupDataTable_hasRowActions, _KupDataTable_removeGroup, _KupDataTable_hasTotals, _KupDataTable_tableHasAutoWidth, _KupDataTable_forceGroupExpansion, _KupDataTable_forceRowGroupExpansion, _KupDataTable_adjustPaginator, _KupDataTable_composeFixedCellStyleAndClass, _KupDataTable_updateFixedRowsAndColumnsCssVariables, _KupDataTable_onColumnSort, _KupDataTable_onRemoveFilter, _KupDataTable_getFilterValueForTooltip, _KupDataTable_onGlobalFilterChange, _KupDataTable_handlePageChange, _KupDataTable_handleRowsPerPageChange, _KupDataTable_onRowClick, _KupDataTable_selectColumn, _KupDataTable_deselectColumn, _KupDataTable_onDefaultRowActionClick, _KupDataTable_onRowActionExpanderClick, _KupDataTable_handleRowSelect, _KupDataTable_onRowExpand, _KupDataTable_onSelectAll, _KupDataTable_openTotalMenu, _KupDataTable_closeTotalMenu, _KupDataTable_isOpenedTotalMenuForColumn, _KupDataTable_groupRows, _KupDataTable_onLoadMoreClick, _KupDataTable_adjustGroupState, _KupDataTable_adjustGroupStateFromRow, _KupDataTable_sortRows, _KupDataTable_getSortIcon, _KupDataTable_getSortDecode, _KupDataTable_calculateColspan, _KupDataTable_isGroupExpanded, _KupDataTable_handleColumnSort, _KupDataTable_moveSortedColumns, _KupDataTable_applyLineBreaks, _KupDataTable_composeHeaderCellClassAndStyle, _KupDataTable_renderHeader, _KupDataTable_renderStickyHeader, _KupDataTable_totalMenuPosition, _KupDataTable_onTotalMenuOpen, _KupDataTable_renderRow, _KupDataTable_renderActions, _KupDataTable_onCustomSettingsClick, _KupDataTable_openCustomSettings, _KupDataTable_closeCustomSettings, _KupDataTable_renderPaginator, _KupDataTable_columnRemoveArea, _KupDataTable_columnGroupArea, _KupDataTable_hideShowColumnDropArea, _KupDataTable_handleColumnGroup, _KupDataTable_transcodeItem, _KupDataTable_createListData, _KupDataTable_FONTSIZE_CODES, _KupDataTable_FONTSIZE_DECODES, _KupDataTable_FONTSIZE_ICONS, _KupDataTable_getFontSizeCodeFromDecode, _KupDataTable_renderFontSizePanel, _KupDataTable_DENSITY_DECODES, _KupDataTable_DENSITY_ICONS, _KupDataTable_getDensityCodeFromDecode, _KupDataTable_renderDensityPanel, _KupDataTable_GRID_CODES, _KupDataTable_GRID_DECODES, _KupDataTable_GRID_ICONS, _KupDataTable_getGridCodeFromDecode, _KupDataTable_renderTransposeSwitch, _KupDataTable_renderTotalsMatrix, _KupDataTable_renderGridPanel;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { FixedCellsClasses, FixedCellsCSSVarsBase, GroupLabelDisplayMode, LoadMoreMode, PaginatorPos, ShowGrid, SortMode, TotalMode, TotalLabel, KupDataTableProps, fieldColumn, iconColumn, keyColumn, SelectionMode, } from "./kup-data-table-declarations";
 import { getColumnByName } from "../../utils/cell-utils";
@@ -743,7 +743,10 @@ export class KupDataTable {
     this.selectedRows = [];
     for (let index = 0; index < rowsIdentifiers.length; index++) {
       const id = rowsIdentifiers[index];
-      this.selectedRows.push(__classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getRow).call(this, id));
+      const row = __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getRow).call(this, id);
+      if (row) {
+        this.selectedRows.push(row);
+      }
     }
     if (emitEvent !== false) {
       this.kupRowSelected.emit({
@@ -1033,7 +1036,7 @@ export class KupDataTable {
           });
         }
         if (this.totals) {
-          const selectedItem = listData.find((item) => item.value === this.totals[column.name]);
+          const selectedItem = listData.find((item) => item.id === this.totals[column.name]);
           if (selectedItem) {
             selectedItem.selected = true;
             listData.push({
@@ -1237,8 +1240,12 @@ export class KupDataTable {
           for (let index = 0; index < this.data.columns.length; index++) {
             const column = this.data.columns[index];
             cells[column.name] = {
-              data: column.cellData ? JSON.parse(JSON.stringify(column.cellData)) : undefined,
-              slotData: column.cellSlotData ? JSON.parse(JSON.stringify(column.cellSlotData)) : undefined,
+              data: column.cellData
+                ? JSON.parse(JSON.stringify(column.cellData))
+                : undefined,
+              slotData: column.cellSlotData
+                ? JSON.parse(JSON.stringify(column.cellSlotData))
+                : undefined,
               isEditable: column.isKey ||
                 column.isEditable,
               obj: Object.assign({}, column.obj),
@@ -3501,27 +3508,34 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_setTransposedData).call(this);
   }
 }, _KupDataTable_getRow = function _KupDataTable_getRow(id) {
-  let row = null;
-  const search = (rows) => {
-    if (rows && rows.length > 0 && !row) {
-      test(rows);
-    }
-  };
-  const test = (rows) => {
-    if (typeof id === 'number') {
-      row = rows[id];
-    }
-    else {
-      row = rows.find((row) => row.id === id);
-    }
-  };
   if (__classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this) && typeof id === 'string') {
-    __classPrivateFieldGet(this, _KupDataTable_paginatedRows, "f").forEach((row) => search(row.group.children));
+    return __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable__getRow).call(this, id, __classPrivateFieldGet(this, _KupDataTable_paginatedRows, "f"));
+  }
+  else {
+    return __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable__getRow).call(this, id, __classPrivateFieldGet(this, _KupDataTable_rows, "f"));
+  }
+}, _KupDataTable__getRow = function _KupDataTable__getRow(id, rows) {
+  if (!rows || rows.length == 0) {
+    return null;
+  }
+  if (typeof id === 'number') {
+    return rows[id];
   }
   else {
-    test(__classPrivateFieldGet(this, _KupDataTable_rows, "f"));
+    for (let i = 0; i < rows.length; i++) {
+      let r = rows[i];
+      if (r.id === id) {
+        return r;
+      }
+      if (r.group) {
+        r = __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable__getRow).call(this, id, r.group.children);
+        if (r) {
+          return r;
+        }
+      }
+    }
   }
-  return row;
+  return null;
 }, _KupDataTable_getTransposedData = function _KupDataTable_getTransposedData(column) {
   if (column) {
     this.filters = {};

package/dist/collection/components/kup-progress-bar/kup-progress-bar.css

@@ -11,247 +11,6 @@
 * @prop --kup-progressbar-width: Sets width of the component.
 */
 :host {
-  --kup_progressbar_border_radius: var(--kup-progressbar-border-radius, 4px);
-  --kup_progressbar_font_family: var(
-    --kup-progressbar-font-family,
-    var(--kup-font-family)
-  );
-  --kup_progressbar_font_size: var(
-    --kup-progressbar-font-size,
-    var(--kup-font-size)
-  );
-  --kup_progressbar_height: var(--kup-progressbar-height, 1.25em);
-  --kup_progressbar_primary_color: var(
-    --kup-progressbar-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_progressbar_text_color: var(
-    --kup-progressbar-text-color,
-    var(--kup-text-color)
-  );
-  --kup_progressbar_text_color_rgb: var(
-    --kup-progressbar-text-color-rgb,
-    var(--kup-text-color-rgb)
-  );
-  --kup_progressbar_text_on_primary_color: var(
-    --kup-progressbar-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup_progressbar_track_color: var(
-    --kup-progressbar-track-color,
-    var(--kup-disabled-background-color)
-  );
-  --kup_progressbar_width: var(--kup-progressbar-width, 100%);
   display: block;
-  font-family: var(--kup_progressbar_font_family);
-  font-size: var(--kup_progressbar_font_size);
-  width: var(--kup_progressbar_width);
-}
-
-.progress-bar {
-  background: var(--kup_progressbar_track_color);
-  border-radius: var(--kup_progressbar_border_radius);
-  overflow: hidden;
-  position: relative;
-  width: var(--kup_progressbar_width);
-}
-.progress-bar.text-color-on-primary .progress-bar-percentage {
-  color: var(--kup_progressbar_text_on_primary_color);
-}
-.progress-bar.text-color-on-primary .progress-bar-percentage span {
-  color: var(--kup_progressbar_text_on_primary_color);
-}
-
-.progress-bar-percentage {
-  background: var(--kup_progressbar_primary_color);
-  border-radius: var(--kup_progressbar_border_radius);
-  color: var(--kup_progressbar_text_color);
-  height: var(--kup_progressbar_height);
-  padding: 0.5em 0;
-  text-align: center;
-  transition: width 0.2s ease;
-}
-.progress-bar-percentage span {
-  color: var(--kup_progressbar_text_color);
-  display: inline-block;
-  font-size: 1em;
-  left: 0;
-  line-height: var(--kup_progressbar_height);
-  position: absolute;
-  width: var(--kup_progressbar_width);
-}
-.progress-bar-percentage .kup-icon {
-  display: block;
-  height: var(--kup_progressbar_height);
-}
-.progress-bar-percentage .kup-icon:not(.is-image) {
-  background-color: var(--kup_progressbar_text_on_primary_color);
-}
-.progress-bar-percentage .kup-icon img {
-  width: auto;
-  height: 100%;
-}
-
-:host([is-radial]) {
-  box-sizing: border-box;
-  margin: auto;
-  padding: 1.25em 0px;
-}
-:host([is-radial]) #kup-component {
-  display: flex;
-  font-size: 10em;
-  margin: auto;
-}
-:host([is-radial]) .pie-wrapper {
-  height: 1em;
-  width: 1em;
-  float: left;
-  margin: auto;
-  position: relative;
-}
-:host([is-radial]) .pie-wrapper:nth-child(3n+1) {
-  clear: both;
-}
-:host([is-radial]) .pie-wrapper .pie {
-  height: 1em;
-  width: 1em;
-  clip: rect(0, 1em, 1em, 0.5em);
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-:host([is-radial]) .pie-wrapper .pie.has-value .half-circle {
-  border-color: var(--kup_progressbar_primary_color);
-}
-:host([is-radial]) .pie-wrapper .pie.has-value .half-circle.left-side {
-  transition: transform 0.2s ease;
-}
-:host([is-radial]) .pie-wrapper .pie.has-value.is-less-than-half .right-side {
-  display: none;
-}
-:host([is-radial]) .pie-wrapper .pie.has-value.is-more-than-half {
-  clip: rect(auto, auto, auto, auto);
-}
-:host([is-radial]) .pie-wrapper .pie.has-value.is-more-than-half .right-side {
-  transform: rotate(180deg);
-}
-:host([is-radial]) .pie-wrapper .pie .half-circle {
-  height: 1em;
-  width: 1em;
-  border: 0.1em solid var(--kup_progressbar_track_color);
-  border-radius: 50%;
-  clip: rect(0, 0.5em, 1em, 0);
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-:host([is-radial]) .pie-wrapper .label {
-  background: none;
-  bottom: 0.4em;
-  color: var(--kup_progressbar_text_color);
-  cursor: default;
-  display: block;
-  font-size: 0.25em;
-  left: 0.4em;
-  line-height: 2.75em;
-  position: absolute;
-  right: 0.4em;
-  text-align: center;
-  top: 0.4em;
-}
-:host([is-radial]) .pie-wrapper .label.kup-icon {
-  display: block;
-  height: 1.25em;
-  width: 1.25em;
-  object-fit: cover;
-  margin: auto;
-}
-:host([is-radial]) .pie-wrapper .label.kup-icon:not(.is-image) {
-  background-color: var(--kup_progressbar_primary_color);
-}
-:host([is-radial]) .pie-wrapper .label.kup-icon img {
-  width: auto;
-  height: 100%;
-}
-:host([is-radial]) .pie-wrapper .label .smaller {
-  color: var(--kup_progressbar_text_color);
-  opacity: 0.8;
-  font-size: 0.45em;
-  padding-bottom: 20px;
-  vertical-align: super;
-}
-:host([is-radial]) .pie-wrapper .shadow {
-  height: 1em;
-  width: 1em;
-  border: 0.1em solid var(--kup_progressbar_track_color);
-  border-radius: 50%;
-}
-:host([is-radial]) *,
-:host([is-radial]) *:before,
-:host([is-radial]) *:after {
-  box-sizing: border-box;
-}
-
-@keyframes running-stripes {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 3em 3em;
-  }
-}
-/*-------------------------------------------------*/
-/*        C o m p o n e n t   C l a s s e s        */
-/*-------------------------------------------------*/
-:host(.kup-animated) .progress-bar-percentage {
-  animation: running-stripes 2s linear infinite;
-}
-
-:host(.kup-padded) .progress-bar {
-  padding: 0.5em;
-  width: calc(100% - 1em);
-}
-
-:host(.kup-slim) #kup-component .progress-bar {
-  border-radius: 9px;
-}
-:host(.kup-slim) #kup-component .progress-bar .progress-bar-percentage {
-  border-radius: 9px;
-  padding: 0;
-}
-:host(.kup-slim) #kup-component .pie-wrapper .pie .half-circle {
-  border-width: 0.05em;
-}
-:host(.kup-slim) #kup-component .pie-wrapper .shadow {
-  border-width: 0.05em;
-}
-
-:host(.kup-striped) .progress-bar-percentage {
-  background-image: linear-gradient(-45deg, rgba(var(--kup_progressbar_text_color_rgb), 0.125) 25%, transparent 25%, transparent 50%, rgba(var(--kup_progressbar_text_color_rgb), 0.125) 50%, rgba(var(--kup_progressbar_text_color_rgb), 0.125) 75%, transparent 75%, transparent);
-  background-size: 3em 3em;
-}
-
-:host(.kup-danger) {
-  --kup-progressbar-primary-color: var(--kup-danger-color);
-  --kup-progressbar-text-on-primary-color: white;
-}
-
-:host(.kup-info) {
-  --kup-progressbar-primary-color: var(--kup-info-color);
-  --kup-progressbar-text-on-primary-color: white;
-}
-
-:host(.kup-secondary) {
-  --kup-progressbar-primary-color: var(--kup-secondary-color);
-  --kup-progressbar-text-on-primary-color: var(--kup-text-on-secondary-color);
-}
-
-:host(.kup-success) {
-  --kup-progressbar-primary-color: var(--kup-success-color);
-  --kup-progressbar-text-on-primary-color: white;
-}
-
-:host(.kup-warning) {
-  --kup-progressbar-primary-color: var(--kup-warning-color);
-  --kup-progressbar-text-on-primary-color: white;
+  width: var(--kup-progressbar-width, 100%);
 }

package/dist/collection/components/kup-progress-bar/kup-progress-bar.js

@@ -1,8 +1,9 @@
-import { forceUpdate, getAssetPath, h, Host, } from "@stencil/core";
+import { forceUpdate, h, Host, } from "@stencil/core";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupProgressBarProps } from "./kup-progress-bar-declarations";
+import { FProgressBar } from "../../f-components/f-progress-bar/f-progress-bar";
 export class KupProgressBar {
   constructor() {
     /*-------------------------------------------------*/
@@ -45,27 +46,6 @@ export class KupProgressBar {
     setProps(this, KupProgressBarProps, props);
   }
   /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  createIconElement() {
-    if (!this.icon) {
-      return undefined;
-    }
-    if (this.icon.indexOf('.') > -1 ||
-      this.icon.indexOf('/') > -1 ||
-      this.icon.indexOf('\\') > -1) {
-      return (h("span", { class: "label kup-icon is-image" }, h("img", { src: this.icon })));
-    }
-    else {
-      let svg = `url('${getAssetPath(`./assets/svg/${this.icon}.svg`)}') no-repeat center`;
-      let iconStyle = {
-        mask: svg,
-        webkitMask: svg,
-      };
-      return h("span", { style: iconStyle, class: "label kup-icon" });
-    }
-  }
-  /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
@@ -87,69 +67,42 @@ export class KupProgressBar {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let componentClass = '';
-    let pieClass = 'pie';
-    let radialStyle = undefined;
-    if (this.isRadial) {
-      componentClass = 'pie-wrapper';
-    }
-    else {
-      componentClass = 'progress-bar';
-    }
-    let labelStyle = undefined;
-    const valueStyle = {
-      width: `${this.value}%`,
+    const props = {
+      animated: this.rootElement.classList.contains('kup-animated')
+        ? true
+        : false,
+      danger: this.rootElement.classList.contains('kup-danger')
+        ? true
+        : false,
+      centeredLabel: this.centeredLabel,
+      hideLabel: this.hideLabel,
+      icon: this.icon,
+      info: this.rootElement.classList.contains('kup-info')
+        ? true
+        : false,
+      isRadial: this.isRadial,
+      label: this.label,
+      padded: this.rootElement.classList.contains('kup-padded')
+        ? true
+        : false,
+      secondary: this.rootElement.classList.contains('kup-secondary')
+        ? true
+        : false,
+      slim: this.rootElement.classList.contains('kup-slim')
+        ? true
+        : false,
+      striped: this.rootElement.classList.contains('kup-striped')
+        ? true
+        : false,
+      success: this.rootElement.classList.contains('kup-success')
+        ? true
+        : false,
+      value: this.value,
+      warning: this.rootElement.classList.contains('kup-warning')
+        ? true
+        : false,
     };
-    if (!this.centeredLabel) {
-      labelStyle = valueStyle;
-      if (this.value > 2) {
-        componentClass += ' text-color-on-primary';
-      }
-    }
-    else if (this.value > 49) {
-      componentClass += ' text-color-on-primary';
-    }
-    let label = null;
-    if (this.icon) {
-      label = this.createIconElement();
-    }
-    else {
-      if (!this.hideLabel) {
-        if (this.isRadial) {
-          if (this.label) {
-            label = h("span", { class: "label" }, this.label);
-          }
-          else {
-            label = (h("span", { class: "label" }, this.value, h("span", { class: "smaller" }, "%")));
-          }
-        }
-        else {
-          if (this.label) {
-            label = this.label;
-          }
-          else {
-            label = this.value + '%';
-          }
-        }
-      }
-    }
-    if (this.value > 0) {
-      pieClass += ' has-value';
-      if (this.value > 50) {
-        pieClass += ' is-more-than-half';
-      }
-      else {
-        pieClass += ' is-less-than-half';
-      }
-    }
-    let el;
-    if (this.isRadial) {
-      el = (h("div", { class: componentClass }, label, h("div", { class: pieClass }, h("div", { style: radialStyle, class: "left-side half-circle" }), h("div", { class: "right-side half-circle" })), h("div", { class: "shadow" })));
-    }
-    else {
-      el = (h("div", { class: componentClass }, h("div", { class: "progress-bar-percentage", style: valueStyle }, h("span", { style: labelStyle }, label))));
-    }
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, el)));
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h(FProgressBar, Object.assign({}, props)))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

package/dist/collection/components/kup-radio/kup-radio.css

@@ -8,166 +8,5 @@
 * @prop --kup-radio-text-color: Sets text color of the radio's label.
 */
 :host {
-  --kup_radio_font_family: var(--kup-radio-font-family, var(--kup-font-family));
-  --kup_radio_font_size: var(--kup-radio-font-size, var(--kup-font-size));
-  --kup_radio_font_weight: var(--kup-radio-font-weight, 400);
-  --kup_radio_outer_circle_color: var(
-    --kup-radio-outer-circle-color,
-    rgba(var(--kup-text-color-rgb), 0.5)
-  );
-  --kup_radio_primary_color: var(
-    --kup-radio-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_radio_primary_color_rgb: var(
-    --kup-radio-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-text-color));
   display: block;
-  font-family: var(--kup_radio_font_family);
-  font-size: var(--kup_radio_font_size);
-}
-
-.form-field {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.875em;
-  line-height: 2em;
-  font-weight: var(--kup_radio_font_weight);
-  letter-spacing: 0.0178571429em;
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-.form-field label {
-  color: var(--kup_radio_text_color);
-  margin-left: 0px;
-  margin-right: auto;
-  padding-left: 4px;
-  padding-right: 0px;
-  order: 0;
-}
-.form-field.form-field--align-end label {
-  margin-left: auto;
-  margin-right: 0px;
-  padding-left: 0px;
-  padding-right: 4px;
-  order: -1 !important;
-}
-
-.radio-wrapper.radio-wrapper--grid {
-  display: grid;
-  grid-gap: 1em;
-  grid-template-columns: var(--kup_radio_columns);
-}
-.radio-wrapper .radio {
-  border-radius: 50%;
-  padding: 10px;
-  position: relative;
-  flex: 0 0 auto;
-  box-sizing: content-box;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  will-change: opacity, transform, border-color, color;
-  will-change: transform, opacity;
-}
-.radio-wrapper .radio:hover {
-  background-color: rgba(var(--kup_radio_primary_color_rgb), 0.125);
-}
-.radio-wrapper .radio .radio__native-control {
-  position: absolute;
-  margin: 0px;
-  padding: 0px;
-  opacity: 0;
-  cursor: inherit;
-  z-index: 1;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  width: 40px;
-  height: 40px;
-}
-.radio-wrapper .radio .radio__background {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-  transition: opacity 120ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 120ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}
-.radio-wrapper .radio .radio__background .radio__outer-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: 50%;
-  transition: border-color 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-}
-.radio-wrapper .radio .radio__background .radio__inner-circle {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  transform: scale(0, 0);
-  border-width: 10px;
-  border-style: solid;
-  border-radius: 50%;
-  transition: transform 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, border-color 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-}
-.radio-wrapper .radio.radio--checked .radio__outer-circle {
-  border-color: var(--kup_radio_primary_color);
-}
-.radio-wrapper .radio.radio--checked .radio__inner-circle {
-  border-color: var(--kup_radio_primary_color);
-  transform: scale(0.5);
-  transition: transform 120ms cubic-bezier(0, 0, 0.2, 1) 0ms, border-color 120ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}
-.radio-wrapper .radio.radio--disabled {
-  pointer-events: none;
-}
-.radio-wrapper .radio.radio--disabled + label {
-  pointer-events: none;
-}
-.radio-wrapper .radio.radio--disabled .radio__outer-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-}
-.radio-wrapper .radio.radio--disabled .radio__inner-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-}
-
-/*-------------------------------------------------*/
-/*        C o m p o n e n t   C l a s s e s        */
-/*-------------------------------------------------*/
-:host(.kup-danger) {
-  --kup-radio-primary-color: var(--kup-danger-color);
-  --kup-radio-primary-color-rgb: var(--kup-danger-color-rgb);
-}
-
-:host(.kup-info) {
-  --kup-radio-primary-color: var(--kup-info-color);
-  --kup-radio-primary-color-rgb: var(--kup-info-color-rgb);
-}
-
-:host(.kup-secondary) {
-  --kup-radio-primary-color: var(--kup-secondary-color);
-  --kup-radio-primary-color-rgb: var(--kup-secondary-color-rgb);
-}
-
-:host(.kup-success) {
-  --kup-radio-primary-color: var(--kup-success-color);
-  --kup-radio-primary-color-rgb: var(--kup-success-color-rgb);
-}
-
-:host(.kup-warning) {
-  --kup-radio-primary-color: var(--kup-warning-color);
-  --kup-radio-primary-color-rgb: var(--kup-warning-color-rgb);
 }