@aquera/nile-elements 0.1.57-beta-1.3 → 0.1.57-beta-1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/index.js +58 -43
  2. package/dist/nile-empty-state/nile-empty-state.cjs.js +1 -1
  3. package/dist/nile-empty-state/nile-empty-state.cjs.js.map +1 -1
  4. package/dist/nile-empty-state/nile-empty-state.esm.js +12 -12
  5. package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
  6. package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
  7. package/dist/nile-pagination/nile-pagination.css.cjs.js +1 -1
  8. package/dist/nile-pagination/nile-pagination.css.cjs.js.map +1 -1
  9. package/dist/nile-pagination/nile-pagination.css.esm.js +50 -33
  10. package/dist/nile-pagination/nile-pagination.esm.js +16 -18
  11. package/dist/src/nile-empty-state/nile-empty-state.js +10 -10
  12. package/dist/src/nile-empty-state/nile-empty-state.js.map +1 -1
  13. package/dist/src/nile-pagination/nile-pagination.css.js +48 -31
  14. package/dist/src/nile-pagination/nile-pagination.css.js.map +1 -1
  15. package/dist/src/nile-pagination/nile-pagination.js +0 -2
  16. package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
  17. package/dist/tsconfig.tsbuildinfo +1 -1
  18. package/package.json +1 -1
  19. package/src/nile-empty-state/nile-empty-state.ts +10 -10
  20. package/src/nile-pagination/nile-pagination.css.ts +48 -31
  21. package/src/nile-pagination/nile-pagination.ts +0 -2
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent nile-elements following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "nile-elements",
6
- "version": "0.1.57-beta-1.3",
6
+ "version": "0.1.57-beta-1.5",
7
7
  "main": "dist/src/index.js",
8
8
  "type": "module",
9
9
  "module": "dist/src/index.js",
package/src/nile-empty-state/nile-empty-state.ts CHANGED
@@ -54,18 +54,18 @@ export class NileEmptyState extends NileElement {
54
54
  */
55
55
  public render(): TemplateResult {
56
56
  return html`
57
- <div class="${classMap({
57
+ <div part="container" class="${classMap({
58
58
  'empty-state': true,
59
59
  'empty-state--sm': this.size == 'sm',
60
60
  'empty-state--md': this.size == 'md',
61
61
  'empty-state--lg': this.size == 'lg'
62
62
  })}">
63
- <div class="${classMap({ 'empty-state__body': true })}">
63
+ <div part="body" class="${classMap({ 'empty-state__body': true })}">
64
64
 
65
65
  ${this.variant == 'content' ? html`
66
- <div class="empty-state__body--content">
66
+ <div part="content-image" class="empty-state__body--content">
67
67
  ${!this.icon && !this.svgIconUrl ? nothing : html`
68
- <div class="empty-state__img__icon">
68
+ <div part="icon-wrapper" class="empty-state__img__icon">
69
69
  ${this.svgIconUrl ? html`
70
70
  <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
71
71
  <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
@@ -78,7 +78,7 @@ export class NileEmptyState extends NileElement {
78
78
  }
79
79
 
80
80
  ${this.variant == 'tonal' ? html`
81
- <div class="empty-state__body--tonal">
81
+ <div part="tonal-body" class="empty-state__body--tonal">
82
82
  ${this.svgIconUrl ? html`
83
83
  <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
84
84
  ` : html`
@@ -88,7 +88,7 @@ export class NileEmptyState extends NileElement {
88
88
  }
89
89
 
90
90
  ${this.variant == 'flat' ? html`
91
- <div class="empty-state__body--flat">
91
+ <div part="flat-body" class="empty-state__body--flat">
92
92
  <span class="nile-flat-type-icon">
93
93
  ${this.svgIconUrl ? html`
94
94
  <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
@@ -99,13 +99,13 @@ export class NileEmptyState extends NileElement {
99
99
  </div>`: nothing
100
100
  }
101
101
 
102
- <div class="empty__state__text-section">
103
- <div class="empty-state__text">${this.text}</div>
104
- <div class="empty-state__subtext">${this.subText}</div>
102
+ <div part="text-section" class="empty__state__text-section">
103
+ <div part="text" class="empty-state__text">${this.text}</div>
104
+ <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
105
105
  </div>
106
106
  </div>
107
107
 
108
- <div class="empty-state-actions">
108
+ <div part="actions" class="empty-state-actions">
109
109
  <slot></slot>
110
110
  </div>
111
111
  </div>
package/src/nile-pagination/nile-pagination.css.ts CHANGED
@@ -18,23 +18,23 @@ export const styles = css`
18
18
  display: flex;
19
19
  align-items: center;
20
20
  justify-content: space-between;
21
- padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;
21
+ padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;
22
22
  }
23
23
 
24
24
 
25
25
  .pagination-wrapper.v2 .pager-container {
26
26
  flex-direction: row;
27
27
  align-items: center;
28
- gap: var(--nile-spacing-spacing-md);
29
- margin-right: var(--nile-spacing-spacing-xl);
28
+ gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
29
+ margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
30
30
  }
31
31
 
32
32
  .pagination-wrapper.v2 .range-text {
33
- margin-right: var(--nile-spacing-spacing-md);
34
- font-size: var(--nile-font-size-small);
35
- color: var(--nile-colors-dark-900);
33
+ margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
34
+ font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
35
+ color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));
36
36
  font-feature-settings: 'liga' off, 'clig' off;
37
- font-weight: var(--nile-font-weight-regular);
37
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
38
38
  }
39
39
 
40
40
 
@@ -46,20 +46,20 @@ export const styles = css`
46
46
 
47
47
 
48
48
  .pagination-wrapper.compact .range-text {
49
- margin-right: var(--nile-spacing-spacing-md);
49
+ margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
50
50
  white-space: nowrap;
51
51
  }
52
52
 
53
53
 
54
54
  .pagination-wrapper.compact .pager-container {
55
- gap: var(--nile-spacing-spacing-md);
55
+ gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
56
56
  }
57
57
 
58
58
 
59
59
  .pagination-wrapper.compact .pager-container {
60
60
  display: flex;
61
61
  align-items: center;
62
- gap: var(--nile-spacing-spacing-md);
62
+ gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
63
63
  }
64
64
 
65
65
  .pagination-wrapper.compact .page-size-dropdown ::part(base) {
@@ -82,14 +82,14 @@ export const styles = css`
82
82
  .compact-pagination {
83
83
  display: flex;
84
84
  align-items: center;
85
- gap: var(--nile-spacing-spacing-xs);
85
+ gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
86
86
  list-style: none;
87
87
  margin: 0;
88
88
  padding: 0;
89
89
  }
90
90
  .page-dropdown .current-page-btn {
91
91
  padding: 2px;
92
- font-size: var(--nile-font-size-small);
92
+ font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));
93
93
  }
94
94
 
95
95
  nile-button.current-page-btn::part(base){
@@ -103,16 +103,16 @@ export const styles = css`
103
103
  .pager-container {
104
104
  display: flex;
105
105
  align-items: center;
106
- gap: var(--nile-spacing-spacing-3xl);
106
+ gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
107
107
  }
108
108
 
109
109
  .pagination-wrapper.compact .pager-container {
110
- gap: var(--nile-spacing-xxs) !important;
110
+ gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;
111
111
  }
112
112
 
113
113
  .range-text {
114
- font-size: var(--nile-font-size-small);
115
- color: var(--nile-colors-dark-900);
114
+ font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));
115
+ color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );
116
116
  white-space: nowrap;
117
117
  }
118
118
 
@@ -124,13 +124,13 @@ export const styles = css`
124
124
  ul.pagination {
125
125
  display: flex;
126
126
  list-style: none;
127
- padding: var(--nile-spacing-spacing-none);
128
- margin: var(--nile-spacing-spacing-none);
129
- gap: var(--nile-radius-radius-xxs);
127
+ padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
128
+ margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
129
+ gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));
130
130
  }
131
131
 
132
132
  ul.pagination li {
133
- margin: var(--nile-spacing-spacing-none);
133
+ margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
134
134
  }
135
135
 
136
136
  .ellipsis-scroll-wrapper {
@@ -152,13 +152,13 @@ export const styles = css`
152
152
  }
153
153
  .compact-dropdown nile-menu {
154
154
  overflow-y: auto;
155
- padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
155
+ padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
156
156
  box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
157
157
  }
158
158
 
159
159
  .page-size-dropdown nile-menu {
160
160
  overflow-y: auto;
161
- padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
161
+ padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
162
162
  box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
163
163
  }
164
164
 
@@ -170,20 +170,20 @@ export const styles = css`
170
170
 
171
171
  .compact-dropdown1 nile-menu {
172
172
  overflow-y: auto;
173
- padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
173
+ padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
174
174
  box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
175
175
  }
176
176
 
177
177
  .compact-dropdown1 nile-menu {
178
178
  overflow-y: auto;
179
- padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
179
+ padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
180
180
  box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
181
181
  }
182
182
 
183
183
 
184
184
  .ellipsis-dropdown nile-menu {
185
185
  overflow-y: auto;
186
- padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
186
+ padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
187
187
  box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
188
188
  }
189
189
 
@@ -193,19 +193,19 @@ export const styles = css`
193
193
  }
194
194
 
195
195
  .pagination-wrapper.fluid ul.pagination li:first-child {
196
- margin-right: var(--nile-spacing-spacing-xs);
196
+ margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
197
197
  }
198
198
  .pagination-wrapper.fluid ul.pagination li:last-child {
199
- margin-left: var(--nile-spacing-spacing-md);
199
+ margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
200
200
  }
201
201
 
202
202
 
203
203
  .page-size-label {
204
- font-size: var(--nile-type-scale-3);
205
- color: var(--nile-colors-dark-500);
206
- margin-left: var(--nile-spacing-spacing-md);
204
+ font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
205
+ color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));
206
+ margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
207
207
  font-feature-settings: 'liga' off, 'clig' off;
208
- font-weight: var(--nile-font-weight-regular);
208
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
209
209
  }
210
210
 
211
211
  nile-button::part(base) {
@@ -214,7 +214,24 @@ export const styles = css`
214
214
  padding: 0px 6px;
215
215
  box-shadow: none;
216
216
  }
217
+
218
+ nile-button.down::part(base) {
219
+ border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
220
+ }
221
+
222
+ nile-button.down::part(base):active {
223
+ border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
224
+ }
225
+
217
226
 
227
+ nile-button.current-page-btn::part(base) {
228
+ border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
229
+ }
230
+
231
+ nile-button.current-page-btn::part(base):active {
232
+ border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
233
+ }
234
+
218
235
  nile-button::part(base):active {
219
236
  min-width: 32px;
220
237
  height: 32px;
package/src/nile-pagination/nile-pagination.ts CHANGED
@@ -134,7 +134,6 @@ private renderCompactRangeText(): TemplateResult {
134
134
  <nile-icon
135
135
  name="chevrondown"
136
136
  size="14"
137
- color="var(--nile-colors-dark-500)"
138
137
  class="chevron"
139
138
  ></nile-icon>
140
139
  </nile-button>
@@ -177,7 +176,6 @@ private renderCompactRangeText(): TemplateResult {
177
176
  <nile-icon
178
177
  name="chevrondown"
179
178
  size="14"
180
- color="var(--nile-colors-dark-500)"
181
179
  class="chevron"
182
180
  ></nile-icon>
183
181
  </nile-button>