spiderly 0.0.2

package/styles/styles/theme/base/components/data/_paginator.scss

@@ -0,0 +1,92 @@
+.p-paginator {
+    background: transparent;
+    color: $paginatorTextColor;
+    border: $paginatorBorder;
+    border-width: $paginatorBorderWidth;
+    padding: $paginatorPadding;
+    border-radius: $borderRadius;
+
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: var(--primary-color);
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        transition: $listItemTransition;
+        border-radius: $paginatorElementBorderRadius;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $paginatorElementHoverBg;
+            border-color: $paginatorElementHoverBorderColor;
+            color: $paginatorElementIconHoverColor;
+        }
+    }
+
+    .p-paginator-first {
+        border-top-left-radius: $paginatorElementBorderRadius;
+        border-bottom-left-radius: $paginatorElementBorderRadius;
+    }
+
+    .p-paginator-last {
+        border-top-right-radius: $paginatorElementBorderRadius;
+        border-bottom-right-radius: $paginatorElementBorderRadius;
+    }
+
+    .p-dropdown {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+        height: $paginatorElementHeight;
+
+        .p-dropdown-label {
+            padding-right: 0;
+        }
+    }
+
+    .p-paginator-page-input {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+
+        .p-inputtext {
+            max-width: $paginatorElementWidth;
+        }
+    }
+
+    .p-paginator-current {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        padding: 0 $inlineSpacing;
+    }
+
+    .p-paginator-pages {
+        .p-paginator-page {
+            background-color: $paginatorElementBg;
+            border: $paginatorElementBorder;
+            color: $paginatorElementIconColor;
+            min-width: $paginatorElementWidth;
+            height: $paginatorElementHeight;
+            margin: $paginatorElementMargin;
+            transition: $listItemTransition;
+            border-radius: $paginatorElementBorderRadius;
+
+            &.p-highlight {
+                background: var(--highlight-bg);
+                border-color: var(--highlight-bg);
+                color: $highlightTextColor;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $paginatorElementHoverBg;
+                border-color: $paginatorElementHoverBorderColor;
+                color: $paginatorElementIconHoverColor;
+            }
+        }
+    }
+}

package/styles/styles/theme/base/components/data/_picklist.scss

@@ -0,0 +1,103 @@
+.p-picklist {
+    .p-picklist-buttons {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-picklist-header {
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-picklist-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+    }
+
+    .p-picklist-filter-container {
+        padding: $panelHeaderPadding;
+        background: $panelContentBg;
+        border: $panelHeaderBorder;
+        border-bottom: 0 none;
+
+        .p-picklist-filter-input {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-picklist-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-picklist-list {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-picklist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+
+            &:focus {
+                @include focused-listitem();
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: var(--highlight-bg);
+            }
+        }
+
+        .p-picklist-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+        }
+
+        &:not(.cdk-drop-list-dragging) {
+            .p-picklist-item {
+                &:not(.p-highlight):hover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+            }
+        }
+    }
+
+    &.p-picklist-striped {
+        .p-picklist-list {
+            .p-picklist-item:nth-child(even) {
+                background: $panelContentEvenRowBg;
+
+                &:hover {
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+    }
+}
+
+.p-picklist-item {
+    &.cdk-drag-preview {
+        padding: $inputListItemPadding;
+        box-shadow: $inputOverlayShadow;
+        border: $inputListItemBorder;
+        color: $inputListItemTextColor;
+        background: $panelContentBg;
+        margin: 0;
+    }
+}

package/styles/styles/theme/base/components/data/_timeline.scss

@@ -0,0 +1,81 @@
+.p-timeline {
+    .p-timeline-event-marker {
+        border: 2px solid var(--primary-color); 
+        border-radius: 2px solid var(--primary-color)Radius;
+        width: $timelineEventMarkerWidth;
+        height: $timelineEventMarkerHeight;
+        background-color: $timelineEventMarkerBackground;
+    }
+
+    .p-timeline-event-connector {
+        background-color: $timelineEventColor;
+    }
+
+    &.p-timeline-vertical {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineVerticalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            width: $timelineEventConnectorSize;
+        }
+    }
+
+    &.p-timeline-horizontal {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineHorizontalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            height: $timelineEventConnectorSize;
+        }
+    }
+}
+
+.customized-timeline{
+	.p-timeline-event-opposite{
+        display: none;
+        // flex: 0;
+        // min-width: 0px;
+        // padding: 0px !important;
+        // padding-right: 20px !important;
+        // text-align: left !important;
+    }
+    .p-timeline-event-connector{
+        position: relative;
+    }
+	.circle {
+		display: flex;
+		z-index: 1;
+		width: 2rem;
+		height: 2rem;
+		align-items: center;
+		justify-content: center;
+		color: white;
+		border-radius: 50%;
+		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+		background-color: var(--primary-color);
+	}
+	.current-item{
+		background-color: green;
+	}
+
+    .passed-item{
+        background-color: green;
+    }
+}
+
+@for $i from 1 through 100 {
+    .custom-connector-#{$i}::before {
+        content: '';
+        display: block;
+        height: $i * 1%;
+        width: 2px;
+        background-color: #4caf50;
+    }
+}
+
+
+

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

@@ -0,0 +1,149 @@
+.p-tree {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $panelContentPadding;
+    border-radius: $borderRadius;
+
+    .p-tree-container {
+        .p-treenode {
+            padding: $treeNodePadding;
+
+            .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;
+                        }
+                    }
+                }
+
+                &:focus {
+                    @include focused-listitem();
+                }
+
+                &.p-highlight {
+                    background: var(--highlight-bg);
+                    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: var(--highlight-bg);
+        }
+    } 
+
+    &.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: var(--highlight-bg);
+                    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/styles/styles/theme/base/components/data/_treetable.scss

@@ -0,0 +1,256 @@
+.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: var(--primary-light-color);
+
+        .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: var(--highlight-bg);
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: var(--primary-color);
+
+            .p-sortable-column-icon {
+                color: var(--primary-color);
+            }
+        }
+    }
+
+    .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 var(--primary-light-color);
+                outline-offset: -0.15rem;
+            }
+
+            &.p-highlight {
+                background: var(--highlight-bg);
+                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: var(--primary-color);
+    }
+
+    .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/styles/styles/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;
+    }
+}