@aquera/nile-elements 0.1.50-beta-1.2 → 0.1.50-beta-1.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.50-beta-1.2",
+  "version": "0.1.50-beta-1.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-content-editor/nile-content-editor.css.ts

@@ -33,7 +33,7 @@ export const styles = css`
   .content-editable-input {
     box-sizing: border-box;
     width: 100%;
-    padding: var(--nile-spacing-md);
+    padding: var(--nile-spacing-9px);
     border: 1px solid var(--nile-colors-neutral-500);
     border-radius: var(--nile-radius-radius-xs);
     overflow: auto;
@@ -68,7 +68,7 @@ export const styles = css`
     padding: var(--nile-spacing-sm);
     height: 24px;
     line-height: 10px;
-    margin-left: var(--nile-spacing-xs);
+    margin-left: var(--nile-height-26px);
     letter-spacing: 0.2px;
   }
 

package/src/nile-input/nile-input.css.ts

@@ -384,7 +384,7 @@ export const styles = css`
   }
 
   .input--medium {
-    font-size: var(--nile-input-font-size-medium);
+    font-size: var(--nile-font-size-rem-large);
     height: var(--nile-height-40px, var(--ng-height-auto));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
   }
@@ -551,11 +551,11 @@ export const styles = css`
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: 1px solid var(--nile-colors-red-500);
     color: var(--nile-colors-red-500);
-    padding: var(--nile-spacing-lg);
+    padding: var(--nile-spacing-10px);
     font-size: var(--nile-type-scale-2);
     max-height: 300px;
     overflow-y: scroll;
-    line-height: var(--nile-line-height-xsmall);
+    line-height: var(--nile-type-scale-4);
   }
 
   .input__remove-non-printable {
@@ -570,7 +570,7 @@ export const styles = css`
     margin-top: var(--nile-spacing-xs);
     color: var(--nile-colors-dark-900);
     word-break: break-all;
-    line-height: var(--nile-line-height-xsmall);
+    line-height: var(--nile-type-scale-4);
   }
 
   .input__srtiked-text {

package/src/nile-pagination/nile-pagination.css.ts

@@ -18,38 +18,101 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
-  }
-
-  .pagination-wrapper.v2 {
-    justify-content: flex-start;
-    gap: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;
   }
 
+ 
   .pagination-wrapper.v2 .pager-container {
     flex-direction: row;
     align-items: center;
-    gap: var(--nile-spacing-spacing-md,  var(--ng-spacing-md));
-    margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
+    gap: var(--nile-spacing-spacing-md);
+    margin-right: var(--nile-spacing-spacing-xl);
   }
 
   .pagination-wrapper.v2 .range-text {
-    margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
-    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    margin-right: var(--nile-spacing-spacing-md);
+    font-size: var(--nile-font-size-small);
+    color: var(--nile-colors-dark-900);
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+ 
+  .pagination-wrapper.compact {
+    min-width: 324px;
+    justify-content: space-between;
+  }
+
+
+
+.pagination-wrapper.compact .range-text {
+  margin-right: var(--nile-spacing-spacing-md);
+  white-space: nowrap;
+}
+
+
+.pagination-wrapper.compact .pager-container {
+  gap: var(--nile-spacing-spacing-md);
+}
+
+
+  .pagination-wrapper.compact .pager-container {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-spacing-md);
   }
 
+  .pagination-wrapper.compact .page-size-dropdown ::part(base) {
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+  }
+
+  .pagination-wrapper.compact .page-size-dropdown .chevron {
+    transition: transform 0.2s;
+  }
+  .pagination-wrapper.compact .page-size-dropdown .open .chevron {
+    transform: rotate(180deg);
+  }
+
+  .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {
+    display: none;
+  }
+
+  .compact-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-spacing-xs);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .page-dropdown .current-page-btn {
+    padding: 2px;
+    font-size: var(--nile-font-size-small);
+  }
+
+  nile-button.current-page-btn::part(base){
+    min-width: 51px;
+  }
+
+  nile-button.current-page-btn::part(base):active {
+  min-width: 51px;
+}
+
   .pager-container {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-spacing-3xl, var( --ng-spacing-3xl));
+    gap: var(--nile-spacing-spacing-3xl);
   }
 
+.pagination-wrapper.compact .pager-container {
+  gap: var(--nile-spacing-xxs) !important;
+}
+
   .range-text {
-    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    font-size: var(--nile-font-size-small);
+    color: var(--nile-colors-dark-900);
     white-space: nowrap;
   }
 
@@ -61,13 +124,13 @@ export const styles = css`
   ul.pagination {
     display: flex;
     list-style: none;
-    padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
-    margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
-    gap: var(--nile-radius-radius-xxs, var(--ng-spacing-xs));
+    padding: var(--nile-spacing-spacing-none);
+    margin: var(--nile-spacing-spacing-none);
+    gap: var(--nile-radius-radius-xxs);
   }
 
   ul.pagination li {
-    margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-spacing-none);
   }
 
   .ellipsis-scroll-wrapper {
@@ -75,69 +138,113 @@ export const styles = css`
     overflow-y: auto;
     width: 66px;
   }
+    .down-scroll-wrapper {
+    max-height: 150px;
+    overflow-y: auto;
+    width: 60px;
+  }
 
-  .ellipsis-dropdown nile-menu {
+
+    .compact-scroll-wrapper {
+    max-height: 160px;
     overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
+    width: 60px;
+  }
+  .compact-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+  
+    .page-size-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
- 
+      .compact-scroll-wrapper1 {
+    max-height: 164px;
+    overflow-y: auto;
+    width: 60px;
+  }
 
-  .page-size-menu {
-    max-height: 144px;
+  .compact-dropdown1 nile-menu {
     overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
+  
+    .compact-dropdown1 nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
 
-  ul.pagination li:first-child {
-    margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
+  .ellipsis-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
-  ul.pagination li:last-child {
-    margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+
+  .page-size-menu {
+    max-height: 144px;
+    overflow-y: auto;
   }
 
+.pagination-wrapper.fluid ul.pagination li:first-child {
+  margin-right: var(--nile-spacing-spacing-xs);
+}
+.pagination-wrapper.fluid ul.pagination li:last-child {
+  margin-left: var(--nile-spacing-spacing-md);
+}
+
+
   .page-size-label {
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
-    margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-dark-500);
+    margin-left: var(--nile-spacing-spacing-md);
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    font-weight: var(--nile-font-weight-regular); 
   }
 
   nile-button::part(base) {
-      min-width: 32px;
-     
-  height: 32px;
-  padding: 0px 6px;
-   
-}
+    min-width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-shadow: none;
+  }
 
   nile-button::part(base):active {
-  min-width: 32px;
-  height: 32px;
-  padding: 0px 6px;
-  box-shadow: var(--nile-box-shadow-none);
-  border:none;
-}
- 
- nile-button.down::part(base){
-  min-width: 62px;
-  border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
- }
-
-  nile-button.arrow::part(base){
-  border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
- }
-
-.page-size-dropdown .chevron {
-  transition: transform 0.2s;
-}
-.page-size-dropdown .open .chevron {
-  transform: rotate(180deg);
-}
-
+    min-width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-shadow: none;
+    border: none;
+  }
 
+  nile-button.down::part(base) {
+    min-width: 62px;
+  }
 
+  nile-button.compactbtn:part(base){
+    background-color: red;
+  }
+  .page-size-dropdown .chevron {
+    transition: transform 0.2s;
+  }
+  .page-size-dropdown .open .chevron {
+    transform: rotate(180deg);
+  }
+ 
+  .pagination-wrapper.compact .compact-dropdown .chevron,
+  .pagination-wrapper.compact .compact-dropdown1 .chevron {
+    transition: transform 0.2s;
+  }
+  .pagination-wrapper.compact .compact-dropdown .down.open .chevron,
+  .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {
+    transform: rotate(180deg);
+  }
 
 
 `;