@telia-ace/alliance-ui 1.0.5-next.1 → 1.0.6-next.0

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 (15) hide show
  1. package/CHANGELOG.md +66 -0
  2. package/README.md +54 -0
  3. package/chunks/{chevron-right-788ce8a9.js → close-cf3fd2c4.js} +5 -4
  4. package/chunks/close-cf3fd2c4.js.map +1 -0
  5. package/components/alliance-modal/alliance-modal.d.ts +20 -0
  6. package/components/alliance-modal/alliance-modal.stories.d.ts +6 -0
  7. package/components/alliance-modal/index.d.ts +1 -0
  8. package/components/alliance-table/alliance-table-row.d.ts +1 -1
  9. package/components/index.d.ts +1 -0
  10. package/components/index.js +390 -278
  11. package/components/index.js.map +1 -1
  12. package/package.json +3 -3
  13. package/voca/icons/index.js +264 -264
  14. package/voca/icons/index.js.map +1 -1
  15. package/chunks/chevron-right-788ce8a9.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,71 @@
1
1
  # @telia-ace/alliance-ui
2
2
 
3
+ ## 1.0.6-next.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 50e1c70: Add `<alliance-modal>` component, see the documentation for more information.
8
+
9
+ ## 1.0.5
10
+
11
+ ### Patch Changes
12
+
13
+ - c47d82c: Update all deps to latest.
14
+ - c47d82c: Fix Alliance paginator component paging arrows getting too much horizontal padding.
15
+ - c47d82c: Improvements to Alliance paginator.
16
+
17
+ - Support for preventing default behaviour of `change-page` event.
18
+ - Export `ChangePageEvent` type.
19
+ - Fixes bug where the Paginator state did not update after properties were changed (https://github.com/telia-company/ace-alliance-sdk/issues/140).
20
+
21
+ ```svelte
22
+ // view.svelte
23
+ <script lang="ts">
24
+ import type { ChangePageEvent } from '@telia-ace/alliance-ui/components/alliance-paginator';
25
+
26
+ let currentPage = 1;
27
+
28
+ function changePageHandler(event: ChangePageEvent) {
29
+ event.preventDefault();
30
+ currentPage = event.detail;
31
+ }
32
+ </script>
33
+
34
+ <alliance-paginator
35
+ on:change-page={changePageHandler}
36
+ initial-page={currentPage}
37
+ item-count="1000"
38
+ />
39
+ ```
40
+
41
+ - c47d82c: Replace `<alliance-object-list>` with `<alliance-table>` and use `display: table` instead of `flex`.
42
+ - c47d82c: More consistent CSS variable names (https://github.com/telia-company/ace-alliance-sdk/issues/137).
43
+
44
+ _New/changed variables_
45
+ | Variable | Equivalent Voca SCSS Variable |
46
+ | -------------------------- | ---------------------------------------------------- |
47
+ | `--box-shadow-sm` | `$telia-shadow-sm` |
48
+ | `--box-shadow-md` | `$telia-shadow-md` |
49
+ | `--box-shadow-lg` | `$telia-shadow-lg` |
50
+ | `--grid-gutter-sm` | `$gutter` |
51
+ | `--grid-gutter-md` | `$gutter-medium` |
52
+ | `--grid-gutter-lg` | `$gutter-large` |
53
+ | `--grid-page-padding-sm` | `$page-padding` |
54
+ | `--grid-page-padding-md` | `$page-padding-m` |
55
+ | `--grid-page-padding-lg` | `$page-padding-l` |
56
+
57
+ _Deprecated variables_
58
+ | Variable | Equivalent Voca SCSS Variable |
59
+ | -------------------------- | ---------------------------------------------------- |
60
+ | `--box-shadow-hard` | `$telia-shadow-hard` |
61
+ | `--box-shadow-soft` | `$telia-shadow-soft` |
62
+ | `--grid-gutter` | `$gutter` |
63
+ | `--grid-gutter-medium` | `$gutter-medium` |
64
+ | `--grid-gutter-large` | `$gutter-large` |
65
+ | `--grid-page-padding` | `$page-padding` |
66
+ | `--grid-page-padding-m` | `$page-padding-m` |
67
+ | `--grid-page-padding-l` | `$page-padding-l` |
68
+
3
69
  ## 1.0.5-next.1
4
70
 
5
71
  ### Patch Changes
package/README.md CHANGED
@@ -4,6 +4,8 @@
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
+ <br>
8
+
7
9
  ## `Table`
8
10
 
9
11
  Used to render tabular data.
@@ -12,6 +14,8 @@ Used to render tabular data.
12
14
  <alliance-table> ... </alliance-table>
13
15
  ```
14
16
 
17
+ <br>
18
+
15
19
  ## `Table Row`
16
20
 
17
21
  Used to render a row inside a table.
@@ -30,6 +34,8 @@ Used to render a row inside a table.
30
34
  | --------- | --------- | -------- | ------- | ------------------------------------------- |
31
35
  | clickable | `boolean` | No | `false` | Whether the row should be clickable or not. |
32
36
 
37
+ <br>
38
+
33
39
  ## `Table Head`
34
40
 
35
41
  Used to display a column head inside a table row.
@@ -48,6 +54,8 @@ Used to display a column head inside a table row.
48
54
  | ----- | -------- | -------- | ------- | --------------- |
49
55
  | label | `string` | No | `''` | The head label. |
50
56
 
57
+ <br>
58
+
51
59
  ## `Table Data`
52
60
 
53
61
  Used to display a cell with data inside a table row.
@@ -60,6 +68,8 @@ Used to display a cell with data inside a table row.
60
68
  </alliance-table>
61
69
  ```
62
70
 
71
+ <br>
72
+
63
73
  ## `Paginator`
64
74
 
65
75
  Used to navigate between pages of tabular data.
@@ -83,10 +93,50 @@ Used to navigate between pages of tabular data.
83
93
  | ------------- | ----------- | ---------- | --------------------------- |
84
94
  | `change-page` | `number` | Yes | Emitted when changing page. |
85
95
 
96
+ <br>
97
+
98
+ ## `Modal`
99
+
100
+ Used to display content in a modal window on top of the page.
101
+
102
+ ```html
103
+ <alliance-modal header="Header">
104
+ <p>
105
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat, est ut
106
+ vehicula maximus.
107
+ </p>
108
+ </alliance-modal>
109
+ ```
110
+
111
+ ### Properties
112
+
113
+ | Name | Type | Required | Default | Description |
114
+ | --------- | --------------------- | -------- | ------- | ---------------------------------------------- |
115
+ | `header` | `string` | Yes | N/A | Modal header label. |
116
+ | `actions` | [`Action[]`](#action) | No | `[]` | Action buttons to display in the modal footer. |
117
+
118
+ #### Action
119
+
120
+ | Name | Type | Required | Default | Description |
121
+ | --------- | --------------------------------------------------------------------------------------- | -------- | ----------- | ---------------------------------------------------------- |
122
+ | `variant` | [`TeliaButtonVariant`](https://docs.voca.teliacompany.com/?path=/story/actions-buttons) | No | `'primary'` | Action button variant. |
123
+ | `label` | `string` | Yes | N/A | Action button label. |
124
+ | `action` | `string` | Yes | N/A | Action key to dispatch when clicking on the action button. |
125
+
126
+ ### Events
127
+
128
+ | Name | Detail Type | Cancelable | Description |
129
+ | -------- | ----------- | ---------- | ------------------------------------------------------------------------------- |
130
+ | `action` | `string` | No | Emitted when clicking the close button, the modal backdrop or an action button. |
131
+
132
+ <br>
133
+
86
134
  # Voca
87
135
 
88
136
  The Alliance UI extends parts of Voca.
89
137
 
138
+ <br>
139
+
90
140
  ## Components
91
141
 
92
142
  Certain Voca components are available.
@@ -152,6 +202,8 @@ import '@telia-ace/alliance-ui/voca/components/telia-button';
152
202
  | `telia-toggle` | [Storybook/telia-toggle](https://docs.voca.teliacompany.com/?path=/story/actions-toggle) |
153
203
  | `telia-visually-hidden` | [Storybook/telia-visually-hidden](https://docs.voca.teliacompany.com/?path=/story/utility-visually-hidden) |
154
204
 
205
+ <br>
206
+
155
207
  ## Foundations
156
208
 
157
209
  [Vocas foundation variables](https://docs.voca.teliacompany.com/?path=/story/foundations).
@@ -337,6 +389,8 @@ _They can be accessed using the [var()](https://developer.mozilla.org/en-US/docs
337
389
  | `--transparent-white-900` | `$telia-transparent-white-900` |
338
390
  | `--focus-border` | `$telia-focus-border-width solid $telia-focus-color` |
339
391
 
392
+ <br>
393
+
340
394
  ## Icons
341
395
 
342
396
  [Vocas icons](https://docs.voca.teliacompany.com/?path=/story/assets-icon-example--example), typically used with `telia-icon`.
package/chunks/{chevron-right-788ce8a9.js → close-cf3fd2c4.js} RENAMED
@@ -1,6 +1,7 @@
1
- const e = { name: "chevron-left", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42.1162 49.8902C42.6915 50.4081 42.9468 51.1934 42.786 51.9505C42.6252 52.7076 42.0727 53.3214 41.3366 53.5607C40.6005 53.8 39.7927 53.6284 39.2174 53.1106L17.5508 33.6106C17.0942 33.1999 16.8335 32.6146 16.8335 32.0004C16.8335 31.3863 17.0942 30.801 17.5508 30.3902L39.2174 10.8902C40.1067 10.0898 41.4766 10.1618 42.277 11.0511C43.0775 11.9403 43.0055 13.3102 42.1162 14.1106L22.2385 32.0004L42.1162 49.8902Z"/></svg>' }, l = { name: "chevron-right", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M47.1663 32.0005C47.1667 32.6147 46.9059 33.2001 46.449 33.6106L24.7824 53.1106C23.8931 53.9111 22.5233 53.8391 21.7228 52.9498C20.9223 52.0606 20.9943 50.6907 21.8836 49.8903L41.7613 32.0005L21.8836 14.1106C21.3083 13.5928 21.053 12.8075 21.2138 12.0503C21.3746 11.2932 21.9271 10.6794 22.6632 10.4402C23.3993 10.2009 24.2071 10.3724 24.7824 10.8903L46.449 30.3903C46.9059 30.8008 47.1667 31.3862 47.1663 32.0005Z"/></svg>' };
1
+ const e = { name: "chevron-left", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42.1162 49.8902C42.6915 50.4081 42.9468 51.1934 42.786 51.9505C42.6252 52.7076 42.0727 53.3214 41.3366 53.5607C40.6005 53.8 39.7927 53.6284 39.2174 53.1106L17.5508 33.6106C17.0942 33.1999 16.8335 32.6146 16.8335 32.0004C16.8335 31.3863 17.0942 30.801 17.5508 30.3902L39.2174 10.8902C40.1067 10.0898 41.4766 10.1618 42.277 11.0511C43.0775 11.9403 43.0055 13.3102 42.1162 14.1106L22.2385 32.0004L42.1162 49.8902Z"/></svg>' }, l = { name: "chevron-right", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M47.1663 32.0005C47.1667 32.6147 46.9059 33.2001 46.449 33.6106L24.7824 53.1106C23.8931 53.9111 22.5233 53.8391 21.7228 52.9498C20.9223 52.0606 20.9943 50.6907 21.8836 49.8903L41.7613 32.0005L21.8836 14.1106C21.3083 13.5928 21.053 12.8075 21.2138 12.0503C21.3746 11.2932 21.9271 10.6794 22.6632 10.4402C23.3993 10.2009 24.2071 10.3724 24.7824 10.8903L46.449 30.3903C46.9059 30.8008 47.1667 31.3862 47.1663 32.0005Z"/></svg>' }, o = { name: "close", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M51.365 48.3012C51.9123 48.8485 52.1261 49.6462 51.9258 50.3939C51.7254 51.1415 51.1415 51.7254 50.3939 51.9258C49.6462 52.1261 48.8485 51.9123 48.3012 51.365L32.4998 35.5636L16.6984 51.365C16.1511 51.9123 15.3534 52.1261 14.6058 51.9258C13.8581 51.7254 13.2742 51.1415 13.0739 50.3939C12.8735 49.6462 13.0873 48.8485 13.6346 48.3012L29.436 32.4998L13.6346 16.6984C13.0873 16.1511 12.8735 15.3534 13.0739 14.6058C13.2742 13.8581 13.8581 13.2742 14.6058 13.0739C15.3534 12.8735 16.1511 13.0873 16.6984 13.6346L32.4998 29.436L48.3012 13.6346C49.1473 12.7885 50.519 12.7885 51.365 13.6346C52.2111 14.4806 52.2111 15.8523 51.365 16.6984L35.5636 32.4998L51.365 48.3012Z"/></svg>' };
2
2
  export {
3
- l as a,
4
- e as c
3
+ e as a,
4
+ l as b,
5
+ o as c
5
6
  };
6
- //# sourceMappingURL=chevron-right-788ce8a9.js.map
7
+ //# sourceMappingURL=close-cf3fd2c4.js.map
package/chunks/close-cf3fd2c4.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"close-cf3fd2c4.js","sources":["../../../node_modules/.pnpm/@teliads+components@18.6.0/node_modules/@teliads/components/icons/main/assets/chevron-left.js","../../../node_modules/.pnpm/@teliads+components@18.6.0/node_modules/@teliads/components/icons/main/assets/chevron-right.js","../../../node_modules/.pnpm/@teliads+components@18.6.0/node_modules/@teliads/components/icons/main/assets/close.js"],"sourcesContent":["export default { \"name\": \"chevron-left\", \"svg\": \"<svg viewBox=\\\"0 0 64 64\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"currentColor\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M42.1162 49.8902C42.6915 50.4081 42.9468 51.1934 42.786 51.9505C42.6252 52.7076 42.0727 53.3214 41.3366 53.5607C40.6005 53.8 39.7927 53.6284 39.2174 53.1106L17.5508 33.6106C17.0942 33.1999 16.8335 32.6146 16.8335 32.0004C16.8335 31.3863 17.0942 30.801 17.5508 30.3902L39.2174 10.8902C40.1067 10.0898 41.4766 10.1618 42.277 11.0511C43.0775 11.9403 43.0055 13.3102 42.1162 14.1106L22.2385 32.0004L42.1162 49.8902Z\\\"/></svg>\" };\n","export default { \"name\": \"chevron-right\", \"svg\": \"<svg viewBox=\\\"0 0 64 64\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"currentColor\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M47.1663 32.0005C47.1667 32.6147 46.9059 33.2001 46.449 33.6106L24.7824 53.1106C23.8931 53.9111 22.5233 53.8391 21.7228 52.9498C20.9223 52.0606 20.9943 50.6907 21.8836 49.8903L41.7613 32.0005L21.8836 14.1106C21.3083 13.5928 21.053 12.8075 21.2138 12.0503C21.3746 11.2932 21.9271 10.6794 22.6632 10.4402C23.3993 10.2009 24.2071 10.3724 24.7824 10.8903L46.449 30.3903C46.9059 30.8008 47.1667 31.3862 47.1663 32.0005Z\\\"/></svg>\" };\n","export default { \"name\": \"close\", \"svg\": \"<svg viewBox=\\\"0 0 64 64\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"currentColor\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M51.365 48.3012C51.9123 48.8485 52.1261 49.6462 51.9258 50.3939C51.7254 51.1415 51.1415 51.7254 50.3939 51.9258C49.6462 52.1261 48.8485 51.9123 48.3012 51.365L32.4998 35.5636L16.6984 51.365C16.1511 51.9123 15.3534 52.1261 14.6058 51.9258C13.8581 51.7254 13.2742 51.1415 13.0739 50.3939C12.8735 49.6462 13.0873 48.8485 13.6346 48.3012L29.436 32.4998L13.6346 16.6984C13.0873 16.1511 12.8735 15.3534 13.0739 14.6058C13.2742 13.8581 13.8581 13.2742 14.6058 13.0739C15.3534 12.8735 16.1511 13.0873 16.6984 13.6346L32.4998 29.436L48.3012 13.6346C49.1473 12.7885 50.519 12.7885 51.365 13.6346C52.2111 14.4806 52.2111 15.8523 51.365 16.6984L35.5636 32.4998L51.365 48.3012Z\\\"/></svg>\" };\n"],"names":["chevronLeft","chevronRight","close"],"mappings":"AAAA,MAAeA,IAAA,EAAE,MAAQ,gBAAgB,KAAO,wiBAAqjB,GCAtlBC,IAAA,EAAE,MAAQ,iBAAiB,KAAO,2iBAAwjB,GCA1lBC,IAAA,EAAE,MAAQ,SAAS,KAAO,qyBAAkzB;"}
package/components/alliance-modal/alliance-modal.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import type { ButtonVariantType } from '@teliads/components/dist/types/types/ButtonVariant';
2
+ import { LitElement } from 'lit';
3
+ import '@/voca/components/telia-button';
4
+ import '@/voca/components/telia-heading';
5
+ import '@/voca/components/telia-icon';
6
+ export type Action = {
7
+ variant: ButtonVariantType;
8
+ label: string;
9
+ action: string;
10
+ };
11
+ export type ActionEvent = CustomEvent<string>;
12
+ export declare class Modal extends LitElement {
13
+ static styles: import("lit").CSSResult;
14
+ onBackdropClick: () => boolean;
15
+ onCloseClick: () => boolean;
16
+ header: string;
17
+ actions: Action[];
18
+ action: (action: string) => boolean;
19
+ render(): import("lit").TemplateResult<1>;
20
+ }
package/components/alliance-modal/alliance-modal.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import '@teliads/components/dist/telia-component-library/telia-component-library.css';
3
+ import '.';
4
+ declare const Story: Meta;
5
+ export declare const Confirm: StoryObj;
6
+ export default Story;
package/components/alliance-modal/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ import './alliance-modal';
package/components/alliance-table/alliance-table-row.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
- export declare class TableBody extends LitElement {
2
+ export declare class TableRow extends LitElement {
3
3
  static styles: import("lit").CSSResult;
4
4
  clickable: boolean;
5
5
  render(): import("lit").TemplateResult<1>;
package/components/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ import './alliance-modal';
1
2
  import './alliance-paginator';
2
3
  import './alliance-table';