@mediusinc/mng-commons-layout 5.0.0-rc.0

package/scss/theme/theme-base/components/data/_tree.scss

@@ -0,0 +1,150 @@
+.p-tree {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $panelContentPadding;
+    border-radius: $borderRadius;
+
+    .p-tree-container {
+        .p-treenode {
+            padding: $treeNodePadding;
+            outline: 0 none;
+
+            &:focus > .p-treenode-content {
+                @include focused-listitem();
+            }
+
+            .p-treenode-content {
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+                padding: $treeNodeContentPadding;
+
+                .p-tree-toggler {
+                    margin-right: $inlineSpacing;
+                    @include action-icon();
+                }
+
+                .p-treenode-icon {
+                    margin-right: $inlineSpacing;
+                    color: $treeNodeIconColor;
+                }
+
+                .p-checkbox {
+                    margin-right: $inlineSpacing;
+
+                    .p-indeterminate {
+                        .p-checkbox-icon {
+                            color: $textColor;
+                        }
+                    }
+                }
+
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+
+                    .p-tree-toggler,
+                    .p-treenode-icon {
+                        color: $highlightTextColor;
+
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+
+                &.p-treenode-selectable:not(.p-highlight):hover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+
+                &.p-treenode-dragover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-tree-filter-container {
+        margin-bottom: $inlineSpacing;
+
+        .p-tree-filter {
+            width: 100%;
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-tree-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-treenode-children {
+        padding: $treeNodeChildrenPadding;
+    }
+
+    .p-tree-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width: $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+
+    .p-treenode-droppoint {
+        &.p-treenode-droppoint-active {
+            background-color: scale-color($highlightBg, $lightness: -20%);
+        }
+    }
+
+    &.p-tree-horizontal {
+        .p-treenode {
+            .p-treenode-content {
+                border-radius: $borderRadius;
+                border: $panelContentBorder;
+                background-color: $panelContentBg;
+                color: $panelContentTextColor;
+                padding: $treeNodeContentPadding;
+                transition: $listItemTransition;
+
+                &.p-highlight {
+                    background-color: $highlightBg;
+                    color: $highlightTextColor;
+
+                    .p-treenode-icon {
+                        color: $highlightTextColor;
+                    }
+                }
+
+                .p-tree-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                .p-treenode-icon {
+                    color: $treeNodeIconColor;
+                    margin-right: $inlineSpacing;
+                }
+
+                .p-checkbox {
+                    margin-right: $inlineSpacing;
+                }
+
+                .p-treenode-label:not(.p-highlight):hover {
+                    background-color: inherit;
+                    color: inherit;
+                }
+
+                &.p-treenode-selectable:not(.p-highlight):hover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+            }
+        }
+    }
+}

package/scss/theme/theme-base/components/data/_treetable.scss

@@ -0,0 +1,255 @@
+.p-treetable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-treetable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-treetable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-treetable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-treetable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        outline-color: $focusOutlineColor;
+
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+        }
+    }
+
+    .p-treetable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-treetable-toggler {
+                    @include action-icon();
+                    margin-right: $inlineSpacing;
+
+                    &.p-icon {
+                        width: $loadingIconFontSize;
+                        height: $loadingIconFontSize;
+                    }
+                }
+
+                p-treetablecheckbox .p-checkbox {
+                    margin-right: $inlineSpacing;
+
+                    .p-indeterminate {
+                        .p-checkbox-icon {
+                            color: $textColor;
+                        }
+                    }
+                }
+            }
+
+            &:focus-visible {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+
+                .p-treetable-toggler {
+                    color: $highlightTextColor;
+
+                    &:hover {
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-treetable-hoverable-rows {
+        .p-treetable-tbody > tr:not(.p-highlight):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+
+            .p-treetable-toggler {
+                color: $tableBodyRowTextHoverColor;
+            }
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    .p-treetable-scrollable-header,
+    .p-treetable-scrollable-footer {
+        background: $panelHeaderBg;
+    }
+
+    .p-treetable-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width: $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+
+    &.p-treetable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-treetable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-treetable-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-thead {
+            > tr {
+                > th {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+    }
+
+    &.p-treetable-sm {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $scaleSM);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-treetable-lg {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}

package/scss/theme/theme-base/components/data/_virtualscroller.scss

@@ -0,0 +1,28 @@
+.p-virtualscroller {
+    .p-virtualscroller-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-virtualscroller-content {
+        background: $tableBodyRowBg;
+        color: $tableBodyRowTextColor;
+        border: $dataViewContentBorder;
+        padding: $dataViewContentPadding;
+    }
+
+    .p-virtualscroller-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+        border-bottom-left-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+}

package/scss/theme/theme-base/components/file/_fileupload.scss

@@ -0,0 +1,64 @@
+.p-fileupload {
+    .p-fileupload-buttonbar {
+        background: $panelHeaderBg;
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-button {
+            margin-right: $inlineSpacing;
+
+            &.p-fileupload-choose.p-focus {
+                @include focused();
+            }
+        }
+    }
+
+    .p-fileupload-content {
+        background: $panelContentBg;
+        padding: $fileUploadContentPadding;
+        border: $panelContentBorder;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.p-fileupload-highlight {
+            border-color: $fileUploadContentHoverBorder;
+            border-style: dashed;
+            background-color: $highlightBg;
+        }
+    }
+
+    .p-progressbar {
+        height: $fileUploadProgressBarHeight;
+    }
+
+    .p-fileupload-row {
+        > div {
+            padding: $tableBodyCellPadding;
+        }
+    }
+
+    &.p-fileupload-advanced {
+        .p-message {
+            margin-top: 0;
+        }
+    }
+}
+
+.p-fileupload-choose {
+    &:not(.p-disabled):hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:not(.p-disabled):active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+}

package/scss/theme/theme-base/components/input/_autocomplete.scss

@@ -0,0 +1,136 @@
+@use 'sass:math';
+
+.p-autocomplete {
+    .p-autocomplete-loader {
+        right: nth($inputPadding, 2);
+    }
+
+    &.p-autocomplete-dd {
+        .p-autocomplete-loader {
+            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-autocomplete-multiple-container {
+            border-color: $inputHoverBorderColor;
+        }
+    }
+
+    &:not(.p-disabled).p-focus {
+        .p-autocomplete-multiple-container {
+            @include focused-input();
+        }
+    }
+
+    .p-autocomplete-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        gap: $inlineSpacing;
+
+        .p-autocomplete-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+
+            input {
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+
+        .p-autocomplete-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-autocomplete-token-icon {
+                margin-left: $inlineSpacing;
+            }
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
+        }
+    }
+
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-autocomplete-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-autocomplete-items {
+        padding: $inputListPadding;
+
+        .p-autocomplete-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+
+        .p-autocomplete-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+    }
+}
+
+p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
+    @include invalid-input();
+}
+
+p-autocomplete.p-autocomplete-clearable {
+    .p-inputtext {
+        padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+    }
+
+    .p-autocomplete-clear-icon {
+        color: $inputIconColor;
+        right: nth($inputPadding, 2);
+    }
+}
+
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd {
+    .p-autocomplete-clear-icon {
+        color: $inputIconColor;
+        right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+    }
+}