@aquera/nile-elements 0.1.50-beta-1.0 → 0.1.50

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.0",
+  "version": "0.1.50",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -191,3 +191,4 @@
     ]
   }
 }
+

package/rollup.config.js

@@ -18,14 +18,9 @@ export default [
   {
     input: Object.fromEntries(
       glob.sync('src/**/*.ts').map(file => [
-        // This removes `src/` as well as the file extension from each file, so e.g.
-        // src/nested/foo.js becomes nested/foo
-        path.relative(
-          'src',
-          file.slice(0, file.length - path.extname(file).length)
-        ),
-        // This expands the relative paths to absolute paths, so e.g.
-        // src/nested/foo becomes /project/src/nested/foo.js
+        path
+          .relative('src', file)
+          .slice(0, -path.extname(file).length),
         fileURLToPath(new URL(file, import.meta.url)),
       ])
     ),
@@ -61,6 +56,7 @@ export default [
         ],
       },
     ],
+    preserveEntrySignatures: false,
     onwarn(warning) {
       if (warning.code !== 'THIS_IS_UNDEFINED') {
         console.error(`(!) ${warning.message}`);
@@ -74,6 +70,7 @@ export default [
         'process.env.LIT_DEV_MODE': JSON.stringify('false'),
       }),
       resolve(),
+      commonjs(),
       terser({
         ecma: 2017,
         module: true,
@@ -87,35 +84,26 @@ export default [
       styles(),
       summary(),
     ],
-    preserveEntrySignatures: false,
   },
-  // {
-  //   input: 'src/index.ts',
-  //   output: {
-  //     file: 'dist/index.iife.js',
-  //     format: 'iife',
-  //     name: 'NileElement'
-  //   },
-  //   plugins: [
-  //     typescript(),
-  //     replace({
-  //       'Reflect.decorate': 'undefined',
-  //       'process.env.NODE_ENV': JSON.stringify('production'),
-  //     }),
-  //     resolve(),
-  //     terser({
-  //       ecma: 2017,
-  //       module: true,
-  //       warnings: true,
-  //       mangle: {
-  //         properties: {
-  //           regex: /^__/,
-  //         },
-  //       },
-  //     }),
-  //     styles(),
-  //     summary(),
-  //     commonjs()
-  //   ],
-  // },
-];
+  {
+    input: 'src/index.ts',
+   output: {
+    file: 'dist/index.js',      
+    format: 'es',
+    sourcemap: false,
+    inlineDynamicImports: true,
+  },
+
+    external: [], 
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: true,
+        declarationDir: 'dist/types',
+      }),
+      terser(),
+    ],
+  },
+];

package/src/index.ts

@@ -16,7 +16,6 @@ export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
 export { NileSelect } from './nile-select';
-export { NileVirtualSelect } from './nile-virtual-select';
 export { NileOption } from './nile-option';
 export { NileTag } from './nile-tag';
 export { NileIconButton } from './nile-icon-button';
@@ -77,6 +76,5 @@ export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
-
 export { NileFilterChip } from './nile-filter-chip';
-export { NilePagination } from './nile-pagination';
+export {NilePagination } from './nile-pagination';

package/src/internal/form.ts

@@ -89,7 +89,7 @@ export class FormControlController implements ReactiveController {
   }
 
   hostConnected() {
-    const form = this.options?.form(this.host);
+    const form = this.options.form(this.host);
 
     if (form) {
       this.attachForm(form);
@@ -97,7 +97,7 @@ export class FormControlController implements ReactiveController {
 
     // Listen for interactions
     interactions.set(this.host, []);
-    this.options?.assumeInteractionOn.forEach(event => {
+    this.options.assumeInteractionOn.forEach(event => {
       this.host.addEventListener(event, this.handleInteraction);
     });
   }

package/src/nile-chip/nile-chip.ts

@@ -165,6 +165,7 @@ export class NileChip extends NileElement {
         </label>
 
         <div
+          part='base' 
           class=${classMap({
             'nile-chip': true,
             'nile-chip--warning': this.warning,

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

@@ -35,7 +35,7 @@ export const styles = css`
   }
 
   .option--single-select {
-    padding: 8px 12px;
+    padding: 9px 12px;
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {

package/src/nile-option/nile-option.ts

@@ -49,6 +49,7 @@ export class NileOption extends NileElement {
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+  @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
   @state() hidden = false; // the option is hidden
   @state() isMultipleSelect = false;
@@ -65,19 +66,13 @@ export class NileOption extends NileElement {
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** Forces the option to display in multiple select mode with checkboxes. */
-  @property({ type: Boolean, reflect: true }) multiple = false;
-
-  /** Indicates whether the option is selected. */
-  @property({ type: Boolean, reflect: true }) selected = false;
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 
-    // Find the closest parent 'nile-select' or 'nile-virtual-select' element
-    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
+    // Find the closest parent 'nile-select' element
+    const parentSelect = this.closest('nile-select');
 
     // Check if the parent has the 'multiple' attribute
     if (parentSelect && parentSelect.hasAttribute('multiple')) {
@@ -89,10 +84,6 @@ export class NileOption extends NileElement {
         this.isMultipleSelect = Boolean(multipleValue);
       }
     }
-
-    if (this.multiple) {
-      this.isMultipleSelect = true;
-    }
   }
 
   protected updated(_changedProperties: PropertyValues): void {
@@ -135,11 +126,6 @@ export class NileOption extends NileElement {
     this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
   }
 
-  @watch('multiple')
-  handleMultipleChange() {
-    this.isMultipleSelect = this.multiple;
-  }
-
   @watch('value')
   handleValueChange() {
     // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers

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

@@ -18,14 +18,10 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
-  }
-
-  .pagination-wrapper.v2 {
-    justify-content: flex-start;
-    gap: var(--nile-spacing-spacing-lg);
+    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;
   }
 
+ 
   .pagination-wrapper.v2 .pager-container {
     flex-direction: row;
     align-items: center;
@@ -41,12 +37,79 @@ export const styles = css`
     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);
   }
 
+.pagination-wrapper.compact .pager-container {
+  gap: var(--nile-spacing-xxs) !important;
+}
+
   .range-text {
     font-size: var(--nile-font-size-small);
     color: var(--nile-colors-dark-900);
@@ -75,63 +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;
+    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);
+
+  .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);
+
+  .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);
     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);
+    font-weight: var(--nile-font-weight-regular); 
   }
 
   nile-button::part(base) {
-      min-width: 32px;
-  height: 32px;
-  padding: 0px 6px;
-  box-shadow: none;
-}
+    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: none;
-  border:none;
-}
- 
- nile-button.down::part(base){
-  min-width: 62px;
-
- }
-.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);
+  }
 
 
 `;