@telia-ace/alliance-ui 1.0.5-next.0 → 1.0.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 (20) hide show
  1. package/CHANGELOG.md +92 -0
  2. package/README.md +31 -30
  3. package/components/{alliance-object-list/alliance-object-list.d.ts → alliance-table/alliance-table-body.d.ts} +1 -1
  4. package/components/{alliance-object-list/alliance-object-list-item.d.ts → alliance-table/alliance-table-data.d.ts} +1 -2
  5. package/components/{alliance-object-list/alliance-object-list-head.d.ts → alliance-table/alliance-table-head.d.ts} +1 -2
  6. package/components/{alliance-object-list/alliance-object-list-row.d.ts → alliance-table/alliance-table-row.d.ts} +1 -2
  7. package/components/alliance-table/alliance-table.d.ts +5 -0
  8. package/components/{alliance-object-list/alliance-object-list.stories.d.ts → alliance-table/alliance-table.stories.d.ts} +0 -0
  9. package/components/alliance-table/index.d.ts +5 -0
  10. package/components/index.d.ts +1 -1
  11. package/components/index.js +321 -325
  12. package/components/index.js.map +1 -1
  13. package/package.json +3 -3
  14. package/voca/components/telia-divider.js +45 -3
  15. package/voca/components/telia-divider.js.map +1 -1
  16. package/voca/foundations/index.js +59 -48
  17. package/voca/foundations/index.js.map +1 -1
  18. package/chunks/telia-divider-7f90475d.js +0 -46
  19. package/chunks/telia-divider-7f90475d.js.map +0 -1
  20. package/components/alliance-object-list/index.d.ts +0 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,97 @@
1
1
  # @telia-ace/alliance-ui
2
2
 
3
+ ## 1.0.5
4
+
5
+ ### Patch Changes
6
+
7
+ - c47d82c: Update all deps to latest.
8
+ - c47d82c: Fix Alliance paginator component paging arrows getting too much horizontal padding.
9
+ - c47d82c: Improvements to Alliance paginator.
10
+
11
+ - Support for preventing default behaviour of `change-page` event.
12
+ - Export `ChangePageEvent` type.
13
+ - Fixes bug where the Paginator state did not update after properties were changed (https://github.com/telia-company/ace-alliance-sdk/issues/140).
14
+
15
+ ```svelte
16
+ // view.svelte
17
+ <script lang="ts">
18
+ import type { ChangePageEvent } from '@telia-ace/alliance-ui/components/alliance-paginator';
19
+
20
+ let currentPage = 1;
21
+
22
+ function changePageHandler(event: ChangePageEvent) {
23
+ event.preventDefault();
24
+ currentPage = event.detail;
25
+ }
26
+ </script>
27
+
28
+ <alliance-paginator
29
+ on:change-page={changePageHandler}
30
+ initial-page={currentPage}
31
+ item-count="1000"
32
+ />
33
+ ```
34
+
35
+ - c47d82c: Replace `<alliance-object-list>` with `<alliance-table>` and use `display: table` instead of `flex`.
36
+ - c47d82c: More consistent CSS variable names (https://github.com/telia-company/ace-alliance-sdk/issues/137).
37
+
38
+ _New/changed variables_
39
+ | Variable | Equivalent Voca SCSS Variable |
40
+ | -------------------------- | ---------------------------------------------------- |
41
+ | `--box-shadow-sm` | `$telia-shadow-sm` |
42
+ | `--box-shadow-md` | `$telia-shadow-md` |
43
+ | `--box-shadow-lg` | `$telia-shadow-lg` |
44
+ | `--grid-gutter-sm` | `$gutter` |
45
+ | `--grid-gutter-md` | `$gutter-medium` |
46
+ | `--grid-gutter-lg` | `$gutter-large` |
47
+ | `--grid-page-padding-sm` | `$page-padding` |
48
+ | `--grid-page-padding-md` | `$page-padding-m` |
49
+ | `--grid-page-padding-lg` | `$page-padding-l` |
50
+
51
+ _Deprecated variables_
52
+ | Variable | Equivalent Voca SCSS Variable |
53
+ | -------------------------- | ---------------------------------------------------- |
54
+ | `--box-shadow-hard` | `$telia-shadow-hard` |
55
+ | `--box-shadow-soft` | `$telia-shadow-soft` |
56
+ | `--grid-gutter` | `$gutter` |
57
+ | `--grid-gutter-medium` | `$gutter-medium` |
58
+ | `--grid-gutter-large` | `$gutter-large` |
59
+ | `--grid-page-padding` | `$page-padding` |
60
+ | `--grid-page-padding-m` | `$page-padding-m` |
61
+ | `--grid-page-padding-l` | `$page-padding-l` |
62
+
63
+ ## 1.0.5-next.1
64
+
65
+ ### Patch Changes
66
+
67
+ - 603ff44: Replace `<alliance-object-list>` with `<alliance-table>` and use `display: table` instead of `flex`.
68
+ - d87f961: More consistent CSS variable names (https://github.com/telia-company/ace-alliance-sdk/issues/137).
69
+
70
+ _New/changed variables_
71
+ | Variable | Equivalent Voca SCSS Variable |
72
+ | -------------------------- | ---------------------------------------------------- |
73
+ | `--box-shadow-sm` | `$telia-shadow-sm` |
74
+ | `--box-shadow-md` | `$telia-shadow-md` |
75
+ | `--box-shadow-lg` | `$telia-shadow-lg` |
76
+ | `--grid-gutter-sm` | `$gutter` |
77
+ | `--grid-gutter-md` | `$gutter-medium` |
78
+ | `--grid-gutter-lg` | `$gutter-large` |
79
+ | `--grid-page-padding-sm` | `$page-padding` |
80
+ | `--grid-page-padding-md` | `$page-padding-m` |
81
+ | `--grid-page-padding-lg` | `$page-padding-l` |
82
+
83
+ _Deprecated variables_
84
+ | Variable | Equivalent Voca SCSS Variable |
85
+ | -------------------------- | ---------------------------------------------------- |
86
+ | `--box-shadow-hard` | `$telia-shadow-hard` |
87
+ | `--box-shadow-soft` | `$telia-shadow-soft` |
88
+ | `--grid-gutter` | `$gutter` |
89
+ | `--grid-gutter-medium` | `$gutter-medium` |
90
+ | `--grid-gutter-large` | `$gutter-large` |
91
+ | `--grid-page-padding` | `$page-padding` |
92
+ | `--grid-page-padding-m` | `$page-padding-m` |
93
+ | `--grid-page-padding-l` | `$page-padding-l` |
94
+
3
95
  ## 1.0.5-next.0
4
96
 
5
97
  ### Patch Changes
package/README.md CHANGED
@@ -4,24 +4,24 @@
4
4
 
5
5
  All `alliance-` components are imported when starting the Alliance server, so these components are available out of the box.
6
6
 
7
- ## `Object List`
7
+ ## `Table`
8
8
 
9
9
  Used to render tabular data.
10
10
 
11
11
  ```html
12
- <alliance-object-list> ... </alliance-object-list>
12
+ <alliance-table> ... </alliance-table>
13
13
  ```
14
14
 
15
- ## `Object List Row`
15
+ ## `Table Row`
16
16
 
17
- Used to render a row inside an object list.
17
+ Used to render a row inside a table.
18
18
 
19
19
  ```html
20
- <alliance-object-list>
21
- <alliance-object-list-row>
20
+ <alliance-table>
21
+ <alliance-tr>
22
22
  <!-- cells -->
23
- </alliance-object-list-row>
24
- </alliance-object-list>
23
+ </alliance-tr>
24
+ </alliance-table>
25
25
  ```
26
26
 
27
27
  ### Properties
@@ -30,16 +30,16 @@ Used to render a row inside an object list.
30
30
  | --------- | --------- | -------- | ------- | ------------------------------------------- |
31
31
  | clickable | `boolean` | No | `false` | Whether the row should be clickable or not. |
32
32
 
33
- ## `Object List Head`
33
+ ## `Table Head`
34
34
 
35
- Used to display a column head inside an object list row.
35
+ Used to display a column head inside a table row.
36
36
 
37
37
  ```html
38
- <alliance-object-list>
39
- <alliance-object-list-row>
40
- <alliance-object-list-head label="Column header" />
41
- </alliance-object-list-row>
42
- </alliance-object-list>
38
+ <alliance-table>
39
+ <alliance-tr>
40
+ <alliance-th label="Column header" />
41
+ </alliance-tr>
42
+ </alliance-table>
43
43
  ```
44
44
 
45
45
  ### Properties
@@ -48,16 +48,16 @@ Used to display a column head inside an object list row.
48
48
  | ----- | -------- | -------- | ------- | --------------- |
49
49
  | label | `string` | No | `''` | The head label. |
50
50
 
51
- ## `Object List Item`
51
+ ## `Table Data`
52
52
 
53
- Used to display an item inside an object list row.
53
+ Used to display a cell with data inside a table row.
54
54
 
55
55
  ```html
56
- <alliance-object-list>
57
- <alliance-object-list-row>
58
- <alliance-object-list-item><!-- data --></alliance-object-list-item>
59
- </alliance-object-list-row>
60
- </alliance-object-list>
56
+ <alliance-table>
57
+ <alliance-tr>
58
+ <alliance-td><!-- data --></alliance-td>
59
+ </alliance-tr>
60
+ </alliance-table>
61
61
  ```
62
62
 
63
63
  ## `Paginator`
@@ -202,8 +202,9 @@ _They can be accessed using the [var()](https://developer.mozilla.org/en-US/docs
202
202
  | `--spacing-96` | `$telia-spacing-96` |
203
203
  | `--spacing-128` | `$telia-spacing-128` |
204
204
  | `--box-shadow-none` | `$telia-shadow-none` |
205
- | `--box-shadow-hard` | `$telia-shadow-hard` |
206
- | `--box-shadow-soft` | `$telia-shadow-soft` |
205
+ | `--box-shadow-sm` | `$telia-shadow-sm` |
206
+ | `--box-shadow-md` | `$telia-shadow-md` |
207
+ | `--box-shadow-lg` | `$telia-shadow-lg` |
207
208
  | `--duration-50` | `$telia-duration-50` |
208
209
  | `--duration-100` | `$telia-duration-100` |
209
210
  | `--duration-150` | `$telia-duration-150` |
@@ -235,12 +236,12 @@ _They can be accessed using the [var()](https://developer.mozilla.org/en-US/docs
235
236
  | `--screen-size-md` | `$telia-breakpoint-medium` |
236
237
  | `--screen-size-lg` | `$telia-breakpoint-large` |
237
238
  | `--screen-size-xl` | `$telia-breakpoint-xlarge` |
238
- | `--grid-gutter` | `$gutter` |
239
- | `--grid-gutter-medium` | `$gutter-medium` |
240
- | `--grid-gutter-large` | `$gutter-large` |
241
- | `--grid-page-padding` | `$page-padding` |
242
- | `--grid-page-padding-m` | `$page-padding-m` |
243
- | `--grid-page-padding-l` | `$page-padding-l` |
239
+ | `--grid-gutter-sm` | `$gutter` |
240
+ | `--grid-gutter-md` | `$gutter-medium` |
241
+ | `--grid-gutter-lg` | `$gutter-large` |
242
+ | `--grid-page-padding-sm` | `$page-padding` |
243
+ | `--grid-page-padding-md` | `$page-padding-m` |
244
+ | `--grid-page-padding-lg` | `$page-padding-l` |
244
245
  | `--grid-page-padding-xl` | `$page-padding-xl` |
245
246
  | `--purple-100` | `$telia-purple-100` |
246
247
  | `--purple-200` | `$telia-purple-200` |
package/components/{alliance-object-list/alliance-object-list.d.ts → alliance-table/alliance-table-body.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
- export declare class ObjectList extends LitElement {
2
+ export declare class TableBody extends LitElement {
3
3
  static styles: import("lit").CSSResult;
4
4
  render(): import("lit").TemplateResult<1>;
5
5
  }
package/components/{alliance-object-list/alliance-object-list-item.d.ts → alliance-table/alliance-table-data.d.ts} RENAMED
@@ -1,6 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
- export declare class ObjectListItem extends LitElement {
2
+ export declare class TableData extends LitElement {
3
3
  static styles: import("lit").CSSResult;
4
- padded: boolean;
5
4
  render(): import("lit").TemplateResult<1>;
6
5
  }
package/components/{alliance-object-list/alliance-object-list-head.d.ts → alliance-table/alliance-table-head.d.ts} RENAMED
@@ -1,8 +1,7 @@
1
1
  import '@/voca/components/telia-heading';
2
2
  import { LitElement } from 'lit';
3
- export declare class ObjectListHead extends LitElement {
3
+ export declare class TableHead extends LitElement {
4
4
  static styles: import("lit").CSSResult;
5
- padded: boolean;
6
5
  label: string;
7
6
  render(): import("lit").TemplateResult<1>;
8
7
  }
package/components/{alliance-object-list/alliance-object-list-row.d.ts → alliance-table/alliance-table-row.d.ts} RENAMED
@@ -1,6 +1,5 @@
1
- import '@/voca/components/telia-divider';
2
1
  import { LitElement } from 'lit';
3
- export declare class ObjectListRow extends LitElement {
2
+ export declare class TableBody extends LitElement {
4
3
  static styles: import("lit").CSSResult;
5
4
  clickable: boolean;
6
5
  render(): import("lit").TemplateResult<1>;
package/components/alliance-table/alliance-table.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class Table extends LitElement {
3
+ static styles: import("lit").CSSResult;
4
+ render(): import("lit").TemplateResult<1>;
5
+ }
package/components/alliance-table/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import './alliance-table';
2
+ import './alliance-table-body';
3
+ import './alliance-table-data';
4
+ import './alliance-table-head';
5
+ import './alliance-table-row';
package/components/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import './alliance-object-list';
2
1
  import './alliance-paginator';
2
+ import './alliance-table';