@sky.ui/core 0.0.8 → 0.0.21

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 (218) hide show
  1. package/auto-import.js +1 -31
  2. package/dist/custom-elements.json +7115 -21498
  3. package/dist/helper/utils/color-resolver.d.ts +12 -0
  4. package/dist/helper/utils/color-resolver.js +1 -1
  5. package/dist/helper/utils/color-resolver.js.map +1 -1
  6. package/dist/index.d.ts +1 -31
  7. package/dist/index.js +1 -1
  8. package/dist/sky-alert/sky-alert.js +32 -42
  9. package/dist/sky-alert/sky-alert.js.map +1 -1
  10. package/dist/sky-appbar/sky-appbar.d.ts +5 -0
  11. package/dist/sky-appbar/sky-appbar.js +63 -21
  12. package/dist/sky-appbar/sky-appbar.js.map +1 -1
  13. package/dist/sky-avatar/sky-avatar.d.ts +2 -2
  14. package/dist/sky-avatar/sky-avatar.js +36 -28
  15. package/dist/sky-avatar/sky-avatar.js.map +1 -1
  16. package/dist/sky-badge/sky-badge.d.ts +2 -0
  17. package/dist/sky-badge/sky-badge.js +21 -19
  18. package/dist/sky-badge/sky-badge.js.map +1 -1
  19. package/dist/sky-button/sky-button.d.ts +4 -0
  20. package/dist/sky-button/sky-button.js +85 -26
  21. package/dist/sky-button/sky-button.js.map +1 -1
  22. package/dist/sky-card/sky-card.d.ts +7 -1
  23. package/dist/sky-card/sky-card.js +72 -40
  24. package/dist/sky-card/sky-card.js.map +1 -1
  25. package/dist/sky-checkbox/sky-checkbox.js +34 -23
  26. package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
  27. package/dist/sky-chip/sky-chip.js +53 -35
  28. package/dist/sky-chip/sky-chip.js.map +1 -1
  29. package/dist/sky-combobox/sky-combobox.d.ts +6 -2
  30. package/dist/sky-combobox/sky-combobox.js +92 -262
  31. package/dist/sky-combobox/sky-combobox.js.map +1 -1
  32. package/dist/sky-dialog/sky-dialog.d.ts +4 -11
  33. package/dist/sky-dialog/sky-dialog.js +78 -131
  34. package/dist/sky-dialog/sky-dialog.js.map +1 -1
  35. package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
  36. package/dist/sky-form/sky-form.js +21 -19
  37. package/dist/sky-form/sky-form.js.map +1 -1
  38. package/dist/sky-image/sky-image.d.ts +1 -0
  39. package/dist/sky-image/sky-image.js +14 -7
  40. package/dist/sky-image/sky-image.js.map +1 -1
  41. package/dist/sky-input/sky-input.d.ts +15 -2
  42. package/dist/sky-input/sky-input.js +188 -193
  43. package/dist/sky-input/sky-input.js.map +1 -1
  44. package/dist/sky-list/sky-list.d.ts +11 -2
  45. package/dist/sky-list/sky-list.js +15 -25
  46. package/dist/sky-list/sky-list.js.map +1 -1
  47. package/dist/sky-listitem/sky-listitem.js +62 -30
  48. package/dist/sky-listitem/sky-listitem.js.map +1 -1
  49. package/dist/sky-radio/sky-radio.d.ts +2 -0
  50. package/dist/sky-radio/sky-radio.js +29 -9
  51. package/dist/sky-radio/sky-radio.js.map +1 -1
  52. package/dist/sky-sheet/sky-sheet.d.ts +1 -1
  53. package/dist/sky-sheet/sky-sheet.js +68 -22
  54. package/dist/sky-sheet/sky-sheet.js.map +1 -1
  55. package/dist/sky-simple-table/index.d.ts +1 -0
  56. package/dist/sky-simple-table/index.js +1 -0
  57. package/dist/sky-simple-table/sky-simple-table.d.ts +68 -0
  58. package/dist/sky-simple-table/sky-simple-table.js +100 -0
  59. package/dist/sky-simple-table/sky-simple-table.js.map +1 -0
  60. package/dist/sky-theme-provider/sky-theme-provider.d.ts +10 -1
  61. package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
  62. package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
  63. package/package.json +24 -269
  64. package/dist/sky-accordion/index.d.ts +0 -1
  65. package/dist/sky-accordion/index.js +0 -1
  66. package/dist/sky-accordion/sky-accordion.d.ts +0 -201
  67. package/dist/sky-accordion/sky-accordion.js +0 -84
  68. package/dist/sky-accordion/sky-accordion.js.map +0 -1
  69. package/dist/sky-accordion-item/index.d.ts +0 -1
  70. package/dist/sky-accordion-item/index.js +0 -1
  71. package/dist/sky-accordion-item/sky-accordion-item.d.ts +0 -161
  72. package/dist/sky-accordion-item/sky-accordion-item.js +0 -191
  73. package/dist/sky-accordion-item/sky-accordion-item.js.map +0 -1
  74. package/dist/sky-breadcrumb/index.d.ts +0 -1
  75. package/dist/sky-breadcrumb/index.js +0 -1
  76. package/dist/sky-breadcrumb/sky-breadcrumb.d.ts +0 -111
  77. package/dist/sky-breadcrumb/sky-breadcrumb.js +0 -230
  78. package/dist/sky-breadcrumb/sky-breadcrumb.js.map +0 -1
  79. package/dist/sky-button-group/index.d.ts +0 -1
  80. package/dist/sky-button-group/index.js +0 -1
  81. package/dist/sky-button-group/sky-button-group.d.ts +0 -93
  82. package/dist/sky-button-group/sky-button-group.js +0 -281
  83. package/dist/sky-button-group/sky-button-group.js.map +0 -1
  84. package/dist/sky-carousel/index.d.ts +0 -1
  85. package/dist/sky-carousel/index.js +0 -1
  86. package/dist/sky-carousel/sky-carousel.d.ts +0 -265
  87. package/dist/sky-carousel/sky-carousel.js +0 -211
  88. package/dist/sky-carousel/sky-carousel.js.map +0 -1
  89. package/dist/sky-counter/index.d.ts +0 -1
  90. package/dist/sky-counter/index.js +0 -1
  91. package/dist/sky-counter/sky-counter.d.ts +0 -130
  92. package/dist/sky-counter/sky-counter.js +0 -101
  93. package/dist/sky-counter/sky-counter.js.map +0 -1
  94. package/dist/sky-drawer/index.d.ts +0 -1
  95. package/dist/sky-drawer/index.js +0 -1
  96. package/dist/sky-drawer/sky-drawer.d.ts +0 -161
  97. package/dist/sky-drawer/sky-drawer.js +0 -175
  98. package/dist/sky-drawer/sky-drawer.js.map +0 -1
  99. package/dist/sky-dropdown/index.d.ts +0 -1
  100. package/dist/sky-dropdown/index.js +0 -1
  101. package/dist/sky-dropdown/sky-dropdown.d.ts +0 -254
  102. package/dist/sky-dropdown/sky-dropdown.js +0 -61
  103. package/dist/sky-dropdown/sky-dropdown.js.map +0 -1
  104. package/dist/sky-dropdown-item/index.d.ts +0 -1
  105. package/dist/sky-dropdown-item/index.js +0 -1
  106. package/dist/sky-dropdown-item/sky-dropdown-item.d.ts +0 -207
  107. package/dist/sky-dropdown-item/sky-dropdown-item.js +0 -341
  108. package/dist/sky-dropdown-item/sky-dropdown-item.js.map +0 -1
  109. package/dist/sky-flexbar/index.d.ts +0 -1
  110. package/dist/sky-flexbar/index.js +0 -1
  111. package/dist/sky-flexbar/sky-flexbar.d.ts +0 -189
  112. package/dist/sky-flexbar/sky-flexbar.js +0 -157
  113. package/dist/sky-flexbar/sky-flexbar.js.map +0 -1
  114. package/dist/sky-flexitem/index.d.ts +0 -1
  115. package/dist/sky-flexitem/index.js +0 -1
  116. package/dist/sky-flexitem/sky-flexitem.d.ts +0 -114
  117. package/dist/sky-flexitem/sky-flexitem.js +0 -52
  118. package/dist/sky-flexitem/sky-flexitem.js.map +0 -1
  119. package/dist/sky-navbar/index.d.ts +0 -1
  120. package/dist/sky-navbar/index.js +0 -1
  121. package/dist/sky-navbar/sky-navbar.d.ts +0 -211
  122. package/dist/sky-navbar/sky-navbar.js +0 -521
  123. package/dist/sky-navbar/sky-navbar.js.map +0 -1
  124. package/dist/sky-navpanel/index.d.ts +0 -1
  125. package/dist/sky-navpanel/index.js +0 -1
  126. package/dist/sky-navpanel/sky-navpanel.d.ts +0 -187
  127. package/dist/sky-navpanel/sky-navpanel.js +0 -404
  128. package/dist/sky-navpanel/sky-navpanel.js.map +0 -1
  129. package/dist/sky-notification/index.d.ts +0 -1
  130. package/dist/sky-notification/index.js +0 -1
  131. package/dist/sky-notification/sky-notification.d.ts +0 -152
  132. package/dist/sky-notification/sky-notification.js +0 -456
  133. package/dist/sky-notification/sky-notification.js.map +0 -1
  134. package/dist/sky-otp/index.d.ts +0 -1
  135. package/dist/sky-otp/index.js +0 -1
  136. package/dist/sky-otp/sky-otp.d.ts +0 -101
  137. package/dist/sky-otp/sky-otp.js +0 -96
  138. package/dist/sky-otp/sky-otp.js.map +0 -1
  139. package/dist/sky-overlay/index.d.ts +0 -1
  140. package/dist/sky-overlay/index.js +0 -1
  141. package/dist/sky-overlay/sky-overlay.d.ts +0 -71
  142. package/dist/sky-overlay/sky-overlay.js +0 -26
  143. package/dist/sky-overlay/sky-overlay.js.map +0 -1
  144. package/dist/sky-pagination/index.d.ts +0 -1
  145. package/dist/sky-pagination/index.js +0 -1
  146. package/dist/sky-pagination/sky-pagination.d.ts +0 -167
  147. package/dist/sky-pagination/sky-pagination.js +0 -453
  148. package/dist/sky-pagination/sky-pagination.js.map +0 -1
  149. package/dist/sky-progress/index.d.ts +0 -1
  150. package/dist/sky-progress/index.js +0 -1
  151. package/dist/sky-progress/sky-progress.d.ts +0 -70
  152. package/dist/sky-progress/sky-progress.js +0 -87
  153. package/dist/sky-progress/sky-progress.js.map +0 -1
  154. package/dist/sky-radio-group/index.d.ts +0 -1
  155. package/dist/sky-radio-group/index.js +0 -1
  156. package/dist/sky-radio-group/sky-radio-group.d.ts +0 -186
  157. package/dist/sky-radio-group/sky-radio-group.js +0 -239
  158. package/dist/sky-radio-group/sky-radio-group.js.map +0 -1
  159. package/dist/sky-range/index.d.ts +0 -1
  160. package/dist/sky-range/index.js +0 -1
  161. package/dist/sky-range/sky-range.d.ts +0 -110
  162. package/dist/sky-range/sky-range.js +0 -196
  163. package/dist/sky-range/sky-range.js.map +0 -1
  164. package/dist/sky-serial/index.d.ts +0 -1
  165. package/dist/sky-serial/index.js +0 -1
  166. package/dist/sky-serial/sky-serial.d.ts +0 -127
  167. package/dist/sky-serial/sky-serial.js +0 -133
  168. package/dist/sky-serial/sky-serial.js.map +0 -1
  169. package/dist/sky-skeleton/index.d.ts +0 -1
  170. package/dist/sky-skeleton/index.js +0 -1
  171. package/dist/sky-skeleton/sky-skeleton.d.ts +0 -80
  172. package/dist/sky-skeleton/sky-skeleton.js +0 -233
  173. package/dist/sky-skeleton/sky-skeleton.js.map +0 -1
  174. package/dist/sky-slider/index.d.ts +0 -1
  175. package/dist/sky-slider/index.js +0 -1
  176. package/dist/sky-slider/sky-slider.d.ts +0 -96
  177. package/dist/sky-slider/sky-slider.js +0 -139
  178. package/dist/sky-slider/sky-slider.js.map +0 -1
  179. package/dist/sky-speeddial/index.d.ts +0 -1
  180. package/dist/sky-speeddial/index.js +0 -1
  181. package/dist/sky-speeddial/sky-speeddial.d.ts +0 -86
  182. package/dist/sky-speeddial/sky-speeddial.js +0 -154
  183. package/dist/sky-speeddial/sky-speeddial.js.map +0 -1
  184. package/dist/sky-spinner/index.d.ts +0 -1
  185. package/dist/sky-spinner/index.js +0 -1
  186. package/dist/sky-spinner/sky-spinner.d.ts +0 -87
  187. package/dist/sky-spinner/sky-spinner.js +0 -334
  188. package/dist/sky-spinner/sky-spinner.js.map +0 -1
  189. package/dist/sky-steps/index.d.ts +0 -1
  190. package/dist/sky-steps/index.js +0 -1
  191. package/dist/sky-steps/sky-steps.d.ts +0 -170
  192. package/dist/sky-steps/sky-steps.js +0 -455
  193. package/dist/sky-steps/sky-steps.js.map +0 -1
  194. package/dist/sky-switch/index.d.ts +0 -1
  195. package/dist/sky-switch/index.js +0 -1
  196. package/dist/sky-switch/sky-switch.d.ts +0 -116
  197. package/dist/sky-switch/sky-switch.js +0 -191
  198. package/dist/sky-switch/sky-switch.js.map +0 -1
  199. package/dist/sky-tab/index.d.ts +0 -1
  200. package/dist/sky-tab/index.js +0 -1
  201. package/dist/sky-tab/sky-tab.d.ts +0 -188
  202. package/dist/sky-tab/sky-tab.js +0 -390
  203. package/dist/sky-tab/sky-tab.js.map +0 -1
  204. package/dist/sky-tab-button/index.d.ts +0 -1
  205. package/dist/sky-tab-button/index.js +0 -1
  206. package/dist/sky-tab-button/sky-tab-button.d.ts +0 -114
  207. package/dist/sky-tab-button/sky-tab-button.js +0 -167
  208. package/dist/sky-tab-button/sky-tab-button.js.map +0 -1
  209. package/dist/sky-theme-switcher/index.d.ts +0 -1
  210. package/dist/sky-theme-switcher/index.js +0 -1
  211. package/dist/sky-theme-switcher/sky-theme-switcher.d.ts +0 -92
  212. package/dist/sky-theme-switcher/sky-theme-switcher.js +0 -43
  213. package/dist/sky-theme-switcher/sky-theme-switcher.js.map +0 -1
  214. package/dist/sky-tooltip/index.d.ts +0 -1
  215. package/dist/sky-tooltip/index.js +0 -1
  216. package/dist/sky-tooltip/sky-tooltip.d.ts +0 -156
  217. package/dist/sky-tooltip/sky-tooltip.js +0 -242
  218. package/dist/sky-tooltip/sky-tooltip.js.map +0 -1
@@ -1,152 +0,0 @@
1
- import { LitElement } from "lit";
2
- export type SkyNotificationPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
3
- export type SkyNotificationScope = "viewport" | "parent";
4
- export type SkyNotificationVariant = "list" | "stack";
5
- export type SkyNotificationAlign = "left" | "center" | "right" | "justify";
6
- export type SkyNotificationAddInput = {
7
- title: string;
8
- message: string;
9
- duration?: number | null;
10
- background?: string;
11
- image?: string;
12
- component?: string;
13
- messageColor?: string;
14
- border?: string;
15
- width?: string;
16
- titleColor?: string;
17
- align?: SkyNotificationAlign;
18
- icon?: string;
19
- iconColor?: string;
20
- };
21
- export type SkyNotificationItem = SkyNotificationAddInput & {
22
- id: number;
23
- removing: boolean;
24
- count: number;
25
- _timeout?: ReturnType<typeof setTimeout>;
26
- };
27
- export type SkyNotificationAddedDetail = {
28
- notification: SkyNotificationItem;
29
- };
30
- export type SkyNotificationRemovedDetail = {
31
- id: number;
32
- };
33
- export type SkyNotificationClearedDetail = void;
34
- /**
35
- * @element sky-notification
36
- *
37
- * @summary Toast notification system with flexible positioning, list/stack layouts, and duplicate merging.
38
- *
39
- * @status stable
40
- * @since 1.0.0
41
- *
42
- * @documentation https://library.sky-ui.com/components/notification
43
- * @dependency sky-icon
44
- * @dependency sky-button
45
- *
46
- * @slot - Optional custom content inside a notification when using `component` property.
47
- *
48
- * @csspart wrap - Container holding all notifications.
49
- * @csspart notification - Individual notification item.
50
- * @csspart notification-content - Row containing optional icon and text.
51
- * @csspart notification-title - Title area of a notification.
52
- * @csspart notification-message - Message/content of a notification.
53
- * @csspart notification-icon - Optional icon to the left of title/message.
54
- * @csspart close-button - The dismiss ("x") button inside each notification.
55
- * @csspart clear-all - The clear-all notifications container.
56
- * @csspart repeat-badge - The badge that appears when notifications are merged.
57
- *
58
- * @property {SkyNotificationPosition} position - Screen position for the notification container.
59
- * @property {SkyNotificationItem[]} notifications - Current rendered notification items.
60
- * @property {boolean} clearAll - Shows the clear-all control.
61
- * @property {boolean} closable - Shows per-notification close control.
62
- * @property {boolean} mergeDuplicates - Merges duplicate notifications and increments a count badge.
63
- * @property {SkyNotificationScope} scope - Container positioning scope (`viewport` or `parent`).
64
- * @property {SkyNotificationVariant} variant - Display mode (`list` or `stack`).
65
- * @property {number} stackHoverGap - Gap in pixels between fanned stack items on hover.
66
- * @property {number} stackFanLimit - Maximum stack items to fan visually.
67
- * @property {number} stackPeek - Visible peek offset in collapsed stack mode.
68
- *
69
- * **Icon color:** Pass `iconColor` in `addNotification()` for the leading icon. If omitted, the icon uses `titleColor`; if that is also omitted, it uses `var(--sky-text-primary)`.
70
- *
71
- * **Security:** When using the `component` option in `addNotification()`, the value is rendered with `unsafeHTML`.
72
- * Only pass trusted or sanitized HTML. Do not pass unsanitized user input (XSS risk).
73
- *
74
- * @fires {CustomEvent<SkyNotificationAddedDetail>} notification-added - Fired when a notification is added.
75
- * @fires {CustomEvent<SkyNotificationRemovedDetail>} notification-removed - Fired when a notification is removed.
76
- * @fires {CustomEvent<SkyNotificationClearedDetail>} notifications-cleared - Fired when all notifications are cleared.
77
- * @method show Opens the notification popover when notifications exist.
78
- * @method hide Closes the notification popover.
79
- *
80
- * @Behavior
81
- * - Supports list and stack layouts with hover fan-out in stack mode.
82
- * - Can merge duplicates and refresh dismissal timers.
83
- * - Supports per-item auto-dismiss and explicit close/clear-all actions.
84
- *
85
- * @example
86
- * ```html
87
- * <sky-notification position="top-right" variant="stack" closable clear-all merge-duplicates></sky-notification>
88
- * ```
89
- * ```vue
90
- * <template>
91
- * <sky-notification position="top-right" variant="stack" closable clear-all merge-duplicates></sky-notification>
92
- * </template>
93
- * ```
94
- * ```jsx
95
- * export default function Demo() {
96
- * return <sky-notification position="top-right" variant="stack" closable clear-all merge-duplicates></sky-notification>;
97
- * }
98
- * ```
99
- */
100
- export declare class SkyNotification extends LitElement {
101
- static dependencies: Record<string, CustomElementConstructor>;
102
- position: SkyNotificationPosition;
103
- notifications: SkyNotificationItem[];
104
- clearAll: boolean;
105
- closable: boolean;
106
- mergeDuplicates: boolean;
107
- scope: SkyNotificationScope;
108
- private _expanded;
109
- /** list = normal vertical list, stack = only last on top, others hidden behind */
110
- variant: SkyNotificationVariant;
111
- /** pixel gap between items when hovering in stack variant */
112
- stackHoverGap: number;
113
- /** max items to visually fan on hover (older ones remain fully behind) */
114
- stackFanLimit: number;
115
- /** px per layer always visible (peeking) */
116
- stackPeek: number;
117
- containerElement: HTMLElement;
118
- anchorElement: HTMLElement;
119
- private notificationCounter;
120
- private notificationPopoverController;
121
- static styles: import("lit").CSSResult;
122
- firstUpdated(): void;
123
- updated(changed: Map<string, unknown>): void;
124
- private _layoutStackRafId;
125
- private _scheduleLayoutStack;
126
- disconnectedCallback(): void;
127
- private _updateAnchorPosition;
128
- private _ro?;
129
- private _stackBound;
130
- private _isBottom;
131
- private _bindStackHoverHandlers;
132
- private _measureHeights;
133
- private _stackItems;
134
- private _applyOffsets;
135
- private _collapsedVisibleHeight;
136
- private _expandedTotalHeight;
137
- private _computeCollapsedOffsets;
138
- private _computeExpandedOffsets;
139
- private _fanOut;
140
- private _layoutStack;
141
- addNotification({ title, message, duration, background, image, component, messageColor, border, width, titleColor, align, icon, iconColor, }: SkyNotificationAddInput): void;
142
- removeNotification(id: number): void;
143
- clearAllNotifications(): void;
144
- show(): void;
145
- hide(): void;
146
- private _isHovered;
147
- private _stackClassesAndZ;
148
- private _renderNotification;
149
- private openPopover;
150
- private closePopover;
151
- render(): import("lit-html").TemplateResult<1>;
152
- }
@@ -1,456 +0,0 @@
1
- import{__decorate as t,__metadata as i}from"tslib";import{LitElement as o,css as e,html as s,nothing as n}from"lit";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";import{property as r,query as c,customElement as l}from"lit/decorators.js";import{when as p}from"lit/directives/when.js";import{repeat as d}from"lit/directives/repeat.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as f}from"lit/directives/style-map.js";import{PopoverController as m}from"../helper/controllers/popover-controller.js";import{SkyIcon as u}from"../sky-icon/sky-icon.js";import{SkyButton as y}from"../sky-button/sky-button.js";let g=class extends o{constructor(){super(...arguments),this.position="bottom-right",this.notifications=[],this.clearAll=!1,this.closable=!1,this.mergeDuplicates=!1,this.scope="viewport",this._expanded=!1,this.variant="list",this.stackHoverGap=4,this.stackFanLimit=3,this.stackPeek=6,this.notificationCounter=0,this.notificationPopoverController=new m(this,{getAnchor:()=>this.anchorElement,getPopover:()=>this.containerElement,sideAttr:"data-side",getPlacement:()=>{const t=this.position||"bottom-right";return t.includes("top")?"top":t.includes("bottom")?"bottom":t.includes("left")?"left":t.includes("right")?"right":"bottom"},getAlign:()=>{const t=this.position||"bottom-right";return t.includes("center")?"center":t.includes("left")?"start":t.includes("right")?"end":"center"},getGap:()=>8,getPadding:()=>0,getMatchAnchorWidth:()=>!1,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!1,getFlipOrder:()=>["top","bottom","right","left"],getPreset:()=>"none",getDuration:()=>250,getCloseDuration:()=>200,getAnimateReposition:()=>!0,getRepositionMs:()=>100,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!1,getRestoreFocusOnClose:()=>!1,focusOnOpen:()=>{}}),this._layoutStackRafId=null,this._stackBound=!1}static{this.dependencies={"sky-icon":u,"sky-button":y}}static{this.styles=e`
2
- :host {
3
- z-index: 9999;
4
- font-family: var(--sky-font);
5
- display: flex;
6
- flex-direction: column;
7
- gap: 4px;
8
- position: fixed !important;
9
- /* Reset positioning properties */
10
- top: unset;
11
- bottom: unset;
12
- left: unset;
13
- right: unset;
14
- transform: unset;
15
- align-items: unset;
16
- }
17
-
18
- /* Hidden anchor element */
19
- #anchor {
20
- display: block;
21
- position: fixed;
22
- width: 1px;
23
- height: 1px;
24
- opacity: 0;
25
- pointer-events: none;
26
- }
27
-
28
- .container {
29
- box-sizing: border-box;
30
- width: max-content;
31
- position: fixed;
32
- background: transparent;
33
- border: none;
34
- top: var(--sky-pop-top);
35
- left: var(--sky-pop-left);
36
- overflow: visible;
37
- margin: 0;
38
- }
39
-
40
- .wrap {
41
- display: flex;
42
- flex-direction: column;
43
- align-items: stretch;
44
- }
45
-
46
- :host([variant="list"]) .wrap {
47
- gap: 4px;
48
- }
49
-
50
- :host([variant="stack"]) .wrap {
51
- display: grid;
52
- justify-items: stretch;
53
- overflow: visible;
54
- position: relative;
55
- }
56
-
57
- :host([variant="stack"][position^="top"]) .wrap {
58
- align-items: start;
59
- }
60
- :host([variant="stack"][position^="bottom"]) .wrap {
61
- align-items: end;
62
- }
63
-
64
- :host([variant="stack"]) .notification {
65
- grid-area: 1 / 1;
66
- margin: 0;
67
- pointer-events: none;
68
- transform: translateY(var(--y, 0px));
69
- will-change: transform;
70
- transition:
71
- transform 220ms ease,
72
- box-shadow 180ms ease,
73
- color 180ms ease,
74
- border 180ms ease;
75
- }
76
-
77
- :host([variant="stack"][position^="top"]) .wrap::after {
78
- content: "";
79
- position: absolute;
80
- left: 0;
81
- right: 0;
82
- top: 0;
83
- height: var(--hit, 0px);
84
- }
85
- :host([variant="stack"][position^="bottom"]) .wrap::after {
86
- content: "";
87
- position: absolute;
88
- left: 0;
89
- right: 0;
90
- bottom: 0;
91
- height: var(--hit, 0px);
92
- }
93
- .clear-all {
94
- display: flex;
95
- justify-content: center;
96
- width: 100%;
97
- margin: 6px 0;
98
- position: sticky;
99
- z-index: 10000;
100
- }
101
-
102
- :host([position^="top"]) .clear-all {
103
- top: 0;
104
- }
105
-
106
- :host([position^="bottom"]) .clear-all {
107
- bottom: 0;
108
- }
109
-
110
- .notification {
111
- background: var(--sky-glass-primary);
112
- backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
113
- var(--sky-saturation-primary);
114
- -webkit-backdrop-filter: var(--sky-blur-primary)
115
- var(--sky-brightness-primary) var(--sky-saturation-primary);
116
- border: var(--sky-border-primary);
117
- border-radius: var(--sky-radius-secondary);
118
- padding: var(--sky-space-3);
119
- box-shadow: var(--sky-box-shadow-primary);
120
- display: flex;
121
- flex-direction: column;
122
- gap: var(--sky-space-2);
123
- color: var(--sky-text-primary);
124
- position: relative;
125
- width: 250px;
126
- will-change: transform, opacity;
127
- font-size: 14px;
128
- transform-origin: center;
129
- transition: all 0.3s ease-in-out;
130
- }
131
-
132
- .notification-message {
133
- font-size: 14px;
134
- font-weight: 400;
135
- color: var(--sky-text-secondary);
136
- }
137
-
138
- .repeat-badge {
139
- background-color: var(--sky-glass-primary);
140
- border: var(--sky-border-primary);
141
- color: var(--sky-active-primary);
142
- font-size: 10px;
143
- font-weight: bold;
144
- padding: 2px 4px;
145
- margin-left: 6px;
146
- border-radius: var(--sky-radius-secondary);
147
- }
148
-
149
- .notification:hover {
150
- transform: scale(1.02);
151
- box-shadow: var(--sky-box-shadow-secondary);
152
- }
153
-
154
- :host([position="top-left"]) .notification {
155
- animation: slide-in-left 0.3s ease-in-out;
156
- }
157
- :host([position="top-right"]) .notification {
158
- animation: slide-in-right 0.3s ease-in-out;
159
- }
160
- :host([position="bottom-left"]) .notification {
161
- animation: slide-in-left 0.3s ease-in-out;
162
- }
163
- :host([position="bottom-right"]) .notification {
164
- animation: slide-in-right 0.3s ease-in-out;
165
- }
166
- :host([position="top-center"]) .notification {
167
- animation: slide-in-top 0.3s ease-in-out;
168
- }
169
- :host([position="bottom-center"]) .notification {
170
- animation: slide-in-bottom 0.3s ease-in-out;
171
- }
172
-
173
- @keyframes slide-in-left {
174
- from {
175
- transform: translateX(-20px);
176
- opacity: 0;
177
- }
178
- to {
179
- transform: translateX(0);
180
- opacity: 1;
181
- }
182
- }
183
- @keyframes slide-in-right {
184
- from {
185
- transform: translateX(20px);
186
- opacity: 0;
187
- }
188
- to {
189
- transform: translateX(0);
190
- opacity: 1;
191
- }
192
- }
193
- @keyframes slide-in-top {
194
- from {
195
- transform: translateY(-20px);
196
- opacity: 0;
197
- }
198
- to {
199
- transform: translateY(0);
200
- opacity: 1;
201
- }
202
- }
203
- @keyframes slide-in-bottom {
204
- from {
205
- transform: translateY(20px);
206
- opacity: 0;
207
- }
208
- to {
209
- transform: translateY(0);
210
- opacity: 1;
211
- }
212
- }
213
-
214
- @media (prefers-reduced-motion: reduce) {
215
- :host([position]) .notification {
216
- animation: none;
217
- }
218
- :host([position]) .notification.fade-out {
219
- animation: sky-notif-fade-out 0.15s ease-out forwards;
220
- }
221
- @keyframes sky-notif-fade-out {
222
- to { opacity: 0; }
223
- }
224
- }
225
-
226
- :host([position="top-left"]) .notification.fade-out {
227
- animation: slide-out-left 0.3s ease-in-out forwards;
228
- }
229
- :host([position="top-right"]) .notification.fade-out {
230
- animation: slide-out-right 0.3s ease-in-out forwards;
231
- }
232
- :host([position="bottom-left"]) .notification.fade-out {
233
- animation: slide-out-left 0.3s ease-in-out forwards;
234
- }
235
- :host([position="bottom-right"]) .notification.fade-out {
236
- animation: slide-out-right 0.3s ease-in-out forwards;
237
- }
238
- :host([position="top-center"]) .notification.fade-out {
239
- animation: slide-out-top 0.3s ease-in-out forwards;
240
- }
241
- :host([position="bottom-center"]) .notification.fade-out {
242
- animation: slide-out-bottom 0.3s ease-in-out forwards;
243
- }
244
-
245
- @keyframes slide-out-left {
246
- from {
247
- transform: translateX(0);
248
- opacity: 1;
249
- }
250
- to {
251
- transform: translateX(-20px);
252
- opacity: 0;
253
- }
254
- }
255
- @keyframes slide-out-right {
256
- from {
257
- transform: translateX(0);
258
- opacity: 1;
259
- }
260
- to {
261
- transform: translateX(20px);
262
- opacity: 0;
263
- }
264
- }
265
- @keyframes slide-out-top {
266
- from {
267
- transform: translateY(0);
268
- opacity: 1;
269
- }
270
- to {
271
- transform: translateY(-20px);
272
- opacity: 0;
273
- }
274
- }
275
- @keyframes slide-out-bottom {
276
- from {
277
- transform: translateY(0);
278
- opacity: 1;
279
- }
280
- to {
281
- transform: translateY(20px);
282
- opacity: 0;
283
- }
284
- }
285
-
286
- .notification-content {
287
- display: flex;
288
- align-items: center;
289
- gap: var(--sky-space-2);
290
- }
291
-
292
- .notification-icon {
293
- flex-shrink: 0;
294
- display: inline-flex;
295
- align-items: center;
296
- justify-content: center;
297
- align-self: center;
298
- font-size: 24px;
299
- }
300
-
301
- .notification-text {
302
- flex: 1;
303
- min-width: 0;
304
- display: flex;
305
- flex-direction: column;
306
- gap: var(--sky-space-1);
307
- }
308
-
309
- .notification-title {
310
- font-weight: bold;
311
- font-size: 14px;
312
- display: flex;
313
- align-items: center;
314
- justify-content: flex-start;
315
- }
316
-
317
- .close-button {
318
- position: absolute;
319
- top: 8px;
320
- right: 8px;
321
- border-radius: var(--sky-radius-secondary);
322
- box-shadow: var(--sky-box-shadow-primary);
323
- display: flex;
324
- padding: 2px;
325
- font-size: 12px;
326
- align-items: center;
327
- justify-content: center;
328
- color: var(--sky-text-primary);
329
- cursor: pointer;
330
- background: var(--sky-glass-primary);
331
- border: var(--sky-border-primary);
332
- transition: all 0.3s ease-in-out;
333
- z-index: 2;
334
-
335
- }
336
- :dir(rtl).close-button {
337
- right: unset;
338
- left: -8px;
339
- }
340
- .close-button::before {
341
- content: "";
342
- position: absolute;
343
- inset: 0px;
344
- backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
345
- var(--sky-saturation-primary);
346
- -webkit-backdrop-filter: var(--sky-blur-primary)
347
- var(--sky-brightness-primary) var(--sky-saturation-primary);
348
- border-radius: inherit;
349
- z-index: -1;
350
- }
351
- .close-button:hover {
352
- color: var(--sky-danger-primary);
353
- }
354
-
355
- .icon {
356
- transition: transform 0.3s ease-in-out;
357
- }
358
- .close-button:hover .icon {
359
- transform: rotate(180deg);
360
- }
361
- :dir(rtl).close-button:hover .icon {
362
- transform: rotate(-180deg);
363
- }
364
- `}firstUpdated(){"undefined"==typeof document||"rtl"!==document.documentElement.dir&&!this.closest("[dir='rtl']")||this.setAttribute("dir","rtl"),this.notificationPopoverController.hostConnected(),this._updateAnchorPosition(),this.notifications.length>0&&this.openPopover()}updated(t){t.has("position")&&this._updateAnchorPosition(),t.has("notifications")&&(this.notifications.length>0?this.openPopover():this.closePopover()),(t.has("notifications")||t.has("variant")||t.has("stackHoverGap")||t.has("stackPeek")||t.has("position"))&&(this._expanded=this._isHovered()||this._expanded,this._scheduleLayoutStack())}_scheduleLayoutStack(){null==this._layoutStackRafId&&(this._layoutStackRafId=requestAnimationFrame(()=>{this._layoutStackRafId=null,this.updateComplete.then(()=>{this._layoutStack(),this.notificationPopoverController.open&&this.notificationPopoverController.position()})}))}disconnectedCallback(){super.disconnectedCallback(),null!=this._layoutStackRafId&&(cancelAnimationFrame(this._layoutStackRafId),this._layoutStackRafId=null),this._ro?.disconnect(),this.notifications.forEach(t=>{t._timeout&&clearTimeout(t._timeout)}),this.notifications=[],this.notificationPopoverController.hostDisconnected()}_updateAnchorPosition(){if(!this.anchorElement)return;const t=this.position||"bottom-right",i=this.anchorElement.style;i.top="unset",i.bottom="unset",i.left="unset",i.right="unset",i.transform="unset","top-left"===t?(i.top="10px",i.left="10px"):"top-right"===t?(i.top="10px",i.right="10px"):"bottom-left"===t?(i.bottom="10px",i.left="10px"):"bottom-right"===t?(i.bottom="10px",i.right="10px"):"top-center"===t?(i.top="10px",i.left="50%",i.transform="translateX(-50%)"):"bottom-center"===t&&(i.bottom="10px",i.left="50%",i.transform="translateX(-50%)"),i.display="block",i.position="fixed",i.width="1px",i.height="1px",i.opacity="0",i.pointerEvents="none"}_isBottom(){const t=this.position||"bottom-right";return String(t).startsWith("bottom")}_bindStackHoverHandlers(){if(this._stackBound)return;const t=this.renderRoot.querySelector(".wrap");t&&(this._stackBound=!0,t.addEventListener("mouseenter",()=>this._fanOut(!0)),t.addEventListener("mouseleave",()=>this._fanOut(!1)))}_measureHeights(){return this._stackItems().map(t=>t.getBoundingClientRect().height)}_stackItems(){return Array.from(this.renderRoot.querySelectorAll(".notification"))}_applyOffsets(t,i){const o=this._stackItems();let e=0,s=-1/0;o.forEach((t,i)=>{const o=Number(getComputedStyle(t).zIndex||"0");o>s&&(s=o,e=i)}),o.forEach((o,s)=>{o.style.setProperty("--y",`${t[s]||0}px`),o.style.pointerEvents=i||s===e?"auto":"none"});const n=this.renderRoot.querySelector(".wrap");if(n){const t=this._expandedTotalHeight(),i=this._collapsedVisibleHeight(),o=12,e=Math.max(0,t-i+o);n.style.setProperty("--hit",t&&this._expanded?`${e}px`:"0px")}}_collapsedVisibleHeight(){const t=this._stackItems(),i=t.length;if(!i)return 0;return(t[0].getBoundingClientRect().height||0)+(Math.min(i,Math.max(1,this.stackFanLimit))-1)*this.stackPeek}_expandedTotalHeight(){const t=this._measureHeights();if(!t.length)return 0;const i=Math.max(0,t.length-1)*this.stackHoverGap;return t.reduce((t,i)=>t+i,0)+i}_computeCollapsedOffsets(){const t=this._stackItems(),i=this.stackPeek,o=this._isBottom()?-1:1,e=Math.max(0,Math.min(t.length,this.stackFanLimit)-1),s=o*e*i;return t.map((t,n)=>n<=e?o*n*i:s)}_computeExpandedOffsets(){const t=this._measureHeights(),i=this.stackHoverGap,o=this._isBottom()?-1:1,e=[];let s=0;for(let n=0;n<t.length;n++)e.push(o*s),s+=t[n]+i;return e}_fanOut(t){if("stack"!==this.variant)return;const i=this._isHovered();this._expanded=!!i||t;const o=this._expanded?this._computeExpandedOffsets():this._computeCollapsedOffsets();this._applyOffsets(o,this._expanded)}_layoutStack(){"stack"===this.variant&&(this._bindStackHoverHandlers(),this._ro||(this._ro=new ResizeObserver(()=>{this._fanOut(this._expanded)})),this._ro.disconnect(),this._stackItems().forEach(t=>this._ro.observe(t)),this._fanOut(this._expanded))}addNotification({title:t,message:i,duration:o,background:e,image:s,component:n,messageColor:a,border:r,width:c,titleColor:l,align:p="left",icon:d,iconColor:h}){if(this.mergeDuplicates){const a=this.notifications.findIndex(o=>!o.removing&&o.title===t&&o.message===i&&o.background===e&&o.image===s&&o.component===n&&o.icon===d&&o.iconColor===h);if(-1!==a){const t={...this.notifications[a]};return t.count=(t.count||1)+1,t._timeout&&clearTimeout(t._timeout),o&&o>0&&(t._timeout=setTimeout(()=>this.removeNotification(t.id),o)),void(this.notifications=[...this.notifications.slice(0,a),t,...this.notifications.slice(a+1)])}}const f=++this.notificationCounter,m={id:f,title:t,message:i,background:e,messageColor:a,border:r,titleColor:l,align:p,image:s,component:n,width:c,icon:d,iconColor:h,removing:!1,count:1};o&&o>0&&(m._timeout=setTimeout(()=>this.removeNotification(f),o)),this.notifications=[...this.notifications,m],this.dispatchEvent(new CustomEvent("notification-added",{detail:{notification:m},bubbles:!0,composed:!0}))}removeNotification(t){const i=this.notifications.findIndex(i=>i.id===t);if(-1===i)return;const o={...this.notifications[i]};clearTimeout(o._timeout),o.removing=!0,this.notifications=[...this.notifications.slice(0,i),o,...this.notifications.slice(i+1)],setTimeout(()=>{this.notifications=this.notifications.filter(i=>i.id!==t),this.dispatchEvent(new CustomEvent("notification-removed",{detail:{id:t},bubbles:!0,composed:!0}))},300)}clearAllNotifications(){this.notifications=this.notifications.map(t=>({...t,removing:!0})),setTimeout(()=>{this.notifications=[],this.dispatchEvent(new CustomEvent("notifications-cleared",{bubbles:!0,composed:!0}))},300)}show(){this.openPopover()}hide(){this.closePopover()}_isHovered(){const t=this.renderRoot.querySelector(".wrap");return!!t&&t.matches(":hover")}_stackClassesAndZ(t,i){return{fan:t<this.stackFanLimit,z:i-t}}_renderNotification(t,i,o){const{fan:e,z:n}=this._stackClassesAndZ(i,o.length),r=h({notification:!0,"fade-out":!!t.removing,fan:"stack"===this.variant&&e}),c=f({background:t.background||"var(--sky-glass-primary)",width:t.width??"250px",border:t.border||"var(--sky-border-primary)",zIndex:String(n),..."stack"===this.variant?{"--i":String(i)}:{}}),l=f({maxWidth:"100%",borderRadius:"12px"});return s`
365
- <div
366
- class=${r}
367
- data-id="${t.id}"
368
- style=${c}
369
- >
370
- ${p(t.image,()=>s`
371
- <img
372
- src="${t.image}"
373
- alt="Notification Image"
374
- style=${l}
375
- />
376
- `)}
377
- ${p(t.component,()=>a(t.component),()=>s`
378
- <div class="notification-content" part="notification-content">
379
- ${p(t.icon,()=>{const i=t.titleColor??"var(--sky-text-primary)",o=t.iconColor??i;return s`
380
- <sky-icon
381
- part="notification-icon"
382
- icon="${t.icon}"
383
- class="notification-icon"
384
- .color=${o}
385
- ></sky-icon>
386
- `})}
387
- <div class="notification-text">
388
- ${p(null!=t.title&&""!==t.title,()=>s`
389
- <div
390
- class="notification-title"
391
- style=${f({color:t.titleColor??"var(--sky-text-primary)"})}
392
- >
393
- ${t.title}
394
- ${p(this.mergeDuplicates&&t.count>1,()=>s`
395
- <span class="repeat-badge" part="repeat-badge"
396
- >+ ${t.count}</span
397
- >
398
- `)}
399
- </div>
400
- `)}
401
- ${p(null!=t.message&&""!==t.message,()=>s`
402
- <div
403
- class="notification-message"
404
- part="notification-message"
405
- style=${f({color:t.messageColor??"var(--sky-text-secondary)",textAlign:t.align})}
406
- >
407
- ${t.message}
408
- </div>
409
- `)}
410
- </div>
411
- </div>
412
- `)}
413
- ${p(this.closable,()=>s`
414
- <button
415
- class="close-button"
416
- part="close-button"
417
- type="button"
418
- aria-label="Dismiss notification"
419
- style=${f({border:t.border||"var(--sky-border-primary)"})}
420
- @mouseover=${t=>{const i=t.currentTarget.firstElementChild;i&&"icon"in i&&(i.icon="ion:remove")}}
421
- @mouseleave=${t=>{const i=t.currentTarget.firstElementChild;i&&"icon"in i&&(i.icon="ion:close")}}
422
- @click=${()=>this.removeNotification(t.id)}
423
- >
424
- <sky-icon icon="ion:close" class="icon"></sky-icon>
425
- </button>
426
- `)}
427
- </div>
428
- `}openPopover(){!this.notificationPopoverController.open&&this.notifications.length>0&&this.notificationPopoverController.openPopover()}closePopover(){this.notificationPopoverController.open&&this.notificationPopoverController.closePopover("api")}render(){const t="stack"===this.variant?[...this.notifications].reverse():this.notifications,i=f("stack"===this.variant?{"--gap":`${this.stackHoverGap}px`,"--stack-peek":`${this.stackPeek}px`}:{}),o=this.notifications.length>0&&this.clearAll,e=()=>s`
429
- <div class="clear-all" part="clear-all">
430
- <sky-button
431
- color="danger"
432
- style=${f({width:"100%"})}
433
- @click=${this.clearAllNotifications}
434
- >Clear All</sky-button
435
- >
436
- </div>
437
- `,a=this.position.startsWith("top");return s`
438
- <div id="anchor"></div>
439
-
440
- <div
441
- class="container"
442
- popover="manual"
443
- @toggle=${this.notificationPopoverController.onToggle}
444
- >
445
- ${p(a&&o,e,()=>n)}
446
- <div
447
- class="wrap"
448
- part="wrap"
449
- style=${i}
450
- >
451
- ${d(t,t=>String(t.id),(i,o)=>this._renderNotification(i,o,t))}
452
- </div>
453
- ${p(!a&&o,e,()=>n)}
454
- </div>
455
- `}};t([r({type:String,reflect:!0}),i("design:type",String)],g.prototype,"position",void 0),t([r({type:Array}),i("design:type",Array)],g.prototype,"notifications",void 0),t([r({type:Boolean,reflect:!0}),i("design:type",Object)],g.prototype,"clearAll",void 0),t([r({type:Boolean,reflect:!0}),i("design:type",Object)],g.prototype,"closable",void 0),t([r({type:Boolean,reflect:!0}),i("design:type",Object)],g.prototype,"mergeDuplicates",void 0),t([r({type:String,reflect:!0}),i("design:type",String)],g.prototype,"scope",void 0),t([r({type:String,reflect:!0}),i("design:type",String)],g.prototype,"variant",void 0),t([r({type:Number}),i("design:type",Object)],g.prototype,"stackHoverGap",void 0),t([r({type:Number}),i("design:type",Object)],g.prototype,"stackFanLimit",void 0),t([r({type:Number}),i("design:type",Object)],g.prototype,"stackPeek",void 0),t([c(".container"),i("design:type",HTMLElement)],g.prototype,"containerElement",void 0),t([c("#anchor"),i("design:type",HTMLElement)],g.prototype,"anchorElement",void 0),g=t([l("sky-notification")],g);export{g as SkyNotification};
456
- //# sourceMappingURL=sky-notification.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"sky-notification.js","sources":["../../src/sky-notification/sky-notification.ts"],"sourcesContent":[null],"names":["SkyNotification","LitElement","constructor","this","position","notifications","clearAll","closable","mergeDuplicates","scope","_expanded","variant","stackHoverGap","stackFanLimit","stackPeek","notificationCounter","notificationPopoverController","PopoverController","getAnchor","anchorElement","getPopover","containerElement","sideAttr","getPlacement","pos","includes","getAlign","getGap","getPadding","getMatchAnchorWidth","getMaxWidthToViewport","getMaxWidthMode","getFlip","getFlipOrder","getPreset","getDuration","getCloseDuration","getAnimateReposition","getRepositionMs","getCloseOnEscape","getCloseOnOutside","getRestoreFocusOnClose","focusOnOpen","_layoutStackRafId","_stackBound","dependencies","SkyIcon","SkyButton","styles","css","firstUpdated","document","documentElement","dir","closest","setAttribute","hostConnected","_updateAnchorPosition","length","openPopover","updated","changed","has","closePopover","_isHovered","_scheduleLayoutStack","requestAnimationFrame","updateComplete","then","_layoutStack","open","disconnectedCallback","super","cancelAnimationFrame","_ro","disconnect","forEach","n","_timeout","clearTimeout","hostDisconnected","style","top","bottom","left","right","transform","display","width","height","opacity","pointerEvents","_isBottom","p","String","startsWith","_bindStackHoverHandlers","wrap","renderRoot","querySelector","addEventListener","_fanOut","_measureHeights","_stackItems","map","el","getBoundingClientRect","Array","from","querySelectorAll","_applyOffsets","offsets","expanded","items","topIndex","topZ","Infinity","i","z","Number","getComputedStyle","zIndex","setProperty","_expandedTotalHeight","collapsedVisible","_collapsedVisibleHeight","SLOP","extra","Math","max","min","h","gaps","reduce","a","b","_computeCollapsedOffsets","peek","sgn","maxPeekIndex","cap","_","idx","_computeExpandedOffsets","gap","off","acc","push","hovered","ResizeObserver","observe","addNotification","title","message","duration","background","image","component","messageColor","border","titleColor","align","icon","iconColor","existingIndex","findIndex","removing","count","setTimeout","removeNotification","id","slice","notification","dispatchEvent","CustomEvent","detail","bubbles","composed","index","notif","filter","clearAllNotifications","show","hide","matches","_stackClassesAndZ","total","fan","_renderNotification","notificationClasses","classMap","cardStyle","styleMap","imgStyle","maxWidth","borderRadius","html","when","unsafeHTML","resolvedTitleColor","iconFill","color","textAlign","e","iconEl","currentTarget","firstElementChild","render","reverse","wrapStyle","showClearAll","clearAllBlock","isTop","onToggle","nothing","repeat","__decorate","property","type","reflect","prototype","Boolean","query","HTMLElement","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- export * from "./sky-otp";
@@ -1 +0,0 @@
1
- export * from './sky-otp.js';