solid-ui 3.1.3-7 → 3.1.3-8

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 (178) hide show
  1. package/dist/_virtual/~icons/app/solid-emblem.cjs.js +3 -0
  2. package/dist/_virtual/~icons/app/solid-emblem.cjs.js.map +1 -0
  3. package/dist/_virtual/~icons/app/solid-emblem.esm.js +11 -0
  4. package/dist/_virtual/~icons/app/solid-emblem.esm.js.map +1 -0
  5. package/dist/breakpoints.css +1 -0
  6. package/dist/breakpoints.css.d.ts +1 -0
  7. package/dist/chunks/{account-BZ2rYQhV.js → account-jSZP2tZ5.js} +72 -56
  8. package/dist/chunks/account-jSZP2tZ5.js.map +1 -0
  9. package/dist/chunks/{auth-RHyQ2iIl.js → auth-CZOEEeJ8.js} +15 -15
  10. package/dist/chunks/{auth-RHyQ2iIl.js.map → auth-CZOEEeJ8.js.map} +1 -1
  11. package/dist/chunks/{avatar-Jx8xm2Op.js → avatar-BugsRJZg.js} +2 -2
  12. package/dist/chunks/{avatar-Jx8xm2Op.js.map → avatar-BugsRJZg.js.map} +1 -1
  13. package/dist/chunks/{footer-D64T6XLO.js → footer-kVa_uMeQ.js} +3 -3
  14. package/dist/chunks/{footer-D64T6XLO.js.map → footer-kVa_uMeQ.js.map} +1 -1
  15. package/dist/chunks/{guard-CjUBGVDk.js → guard-Cml6dHTv.js} +2 -2
  16. package/dist/chunks/{guard-CjUBGVDk.js.map → guard-Cml6dHTv.js.map} +1 -1
  17. package/dist/chunks/{headerFooterHelpers-7O_ln1QD.js → headerFooterHelpers-BiZ6X10e.js} +15 -15
  18. package/dist/chunks/{headerFooterHelpers-7O_ln1QD.js.map → headerFooterHelpers-BiZ6X10e.js.map} +1 -1
  19. package/dist/chunks/{jsonld-DRZuoyoU.js → jsonld-Cd-ZhJmZ.js} +2 -2
  20. package/dist/chunks/{jsonld-DRZuoyoU.js.map → jsonld-Cd-ZhJmZ.js.map} +1 -1
  21. package/dist/chunks/{login-button-DPeMi00d.js → login-button-pe1-DVNZ.js} +2 -2
  22. package/dist/chunks/{login-button-DPeMi00d.js.map → login-button-pe1-DVNZ.js.map} +1 -1
  23. package/dist/chunks/{logout-button-CbiLE7jO.js → logout-button-C5dtQiBB.js} +2 -2
  24. package/dist/chunks/{logout-button-CbiLE7jO.js.map → logout-button-C5dtQiBB.js.map} +1 -1
  25. package/dist/chunks/{menu-item-Ck0l-uEI.js → menu-item-CWg-eS4V.js} +7 -5
  26. package/dist/chunks/menu-item-CWg-eS4V.js.map +1 -0
  27. package/dist/chunks/{provider-C4eSzopG.js → provider-DRxSExO6.js} +2 -2
  28. package/dist/chunks/{provider-C4eSzopG.js.map → provider-DRxSExO6.js.map} +1 -1
  29. package/dist/chunks/{signup-button-BfIxbpwa.js → signup-button-QvYELqb6.js} +2 -2
  30. package/dist/chunks/{signup-button-BfIxbpwa.js.map → signup-button-QvYELqb6.js.map} +1 -1
  31. package/dist/chunks/solid-emblem-BDzhMTjL.js +185 -0
  32. package/dist/chunks/solid-emblem-BDzhMTjL.js.map +1 -0
  33. package/dist/chunks/{solid-logic.esm-T70qfHAr.js → solid-logic.esm-BhVcNu8u.js} +7 -28
  34. package/dist/chunks/{solid-logic.esm-T70qfHAr.js.map → solid-logic.esm-BhVcNu8u.js.map} +1 -1
  35. package/dist/chunks/{src-Bx4GAnWq.js → src-DYvSns7X.js} +2375 -2351
  36. package/dist/chunks/src-DYvSns7X.js.map +1 -0
  37. package/dist/components/account/Account.cjs.js +7 -2
  38. package/dist/components/account/Account.cjs.js.map +1 -1
  39. package/dist/components/account/Account.d.ts +8 -1
  40. package/dist/components/account/Account.d.ts.map +1 -1
  41. package/dist/components/account/Account.esm.js +64 -48
  42. package/dist/components/account/Account.esm.js.map +1 -1
  43. package/dist/components/account/Account.stories.d.ts +3 -8
  44. package/dist/components/account/Account.stories.d.ts.map +1 -1
  45. package/dist/components/account/index.cjs.js.map +1 -1
  46. package/dist/components/account/index.d.ts +2 -2
  47. package/dist/components/account/index.d.ts.map +1 -1
  48. package/dist/components/account/index.esm.js.map +1 -1
  49. package/dist/components/account.js +1 -1
  50. package/dist/components/avatar.js +1 -1
  51. package/dist/components/footer.js +1 -1
  52. package/dist/components/guard.js +1 -1
  53. package/dist/components/index.cjs.js +1 -1
  54. package/dist/components/index.esm.js +2 -2
  55. package/dist/components/login-button.js +1 -1
  56. package/dist/components/login-modal.js +1 -1
  57. package/dist/components/logout-button.js +1 -1
  58. package/dist/components/menu-item/MenuItem.cjs.js +5 -3
  59. package/dist/components/menu-item/MenuItem.cjs.js.map +1 -1
  60. package/dist/components/menu-item/MenuItem.d.ts.map +1 -1
  61. package/dist/components/menu-item/MenuItem.esm.js +5 -3
  62. package/dist/components/menu-item/MenuItem.esm.js.map +1 -1
  63. package/dist/components/menu-item/MenuItem.styles.cjs.js +1 -1
  64. package/dist/components/menu-item/MenuItem.styles.cjs.js.map +1 -1
  65. package/dist/components/menu-item/MenuItem.styles.esm.js +1 -1
  66. package/dist/components/menu-item/MenuItem.styles.esm.js.map +1 -1
  67. package/dist/components/menu-item.js +1 -1
  68. package/dist/components/provider.js +1 -1
  69. package/dist/components/signup-button.js +1 -1
  70. package/dist/components/solid-emblem/SolidEmblem.cjs.js +2 -0
  71. package/dist/components/solid-emblem/SolidEmblem.cjs.js.map +1 -0
  72. package/dist/components/solid-emblem/SolidEmblem.d.ts +6 -0
  73. package/dist/components/solid-emblem/SolidEmblem.d.ts.map +1 -0
  74. package/dist/components/solid-emblem/SolidEmblem.esm.js +178 -0
  75. package/dist/components/solid-emblem/SolidEmblem.esm.js.map +1 -0
  76. package/dist/components/solid-emblem/SolidEmblem.styles.cjs.js +2 -0
  77. package/dist/components/solid-emblem/SolidEmblem.styles.cjs.js.map +1 -0
  78. package/dist/components/solid-emblem/SolidEmblem.styles.esm.js +7 -0
  79. package/dist/components/solid-emblem/SolidEmblem.styles.esm.js.map +1 -0
  80. package/dist/components/solid-emblem/index.cjs.js +2 -0
  81. package/dist/components/solid-emblem/index.cjs.js.map +1 -0
  82. package/dist/components/solid-emblem/index.d.ts +4 -0
  83. package/dist/components/solid-emblem/index.d.ts.map +1 -0
  84. package/dist/components/solid-emblem/index.esm.js +7 -0
  85. package/dist/components/solid-emblem/index.esm.js.map +1 -0
  86. package/dist/components/solid-emblem.js +2 -0
  87. package/dist/components.js +11 -11
  88. package/dist/index.js +4 -5
  89. package/dist/lib/forms/rdfHelper.d.ts +4 -0
  90. package/dist/lib/forms/rdfHelper.d.ts.map +1 -0
  91. package/dist/loader.js +4 -5
  92. package/dist/solid-ui.js +78 -1169
  93. package/dist/solid-ui.min.js +78 -1169
  94. package/dist/solid-ui.min.js.map +1 -1
  95. package/dist/theme.css +1 -1
  96. package/package.json +7 -2
  97. package/dist/chunks/account-BZ2rYQhV.js.map +0 -1
  98. package/dist/chunks/header-COBaJDdB.js +0 -1486
  99. package/dist/chunks/header-COBaJDdB.js.map +0 -1
  100. package/dist/chunks/iconBase-DJ0zbNSL.js +0 -31
  101. package/dist/chunks/iconBase-DJ0zbNSL.js.map +0 -1
  102. package/dist/chunks/menu-item-Ck0l-uEI.js.map +0 -1
  103. package/dist/chunks/src-Bx4GAnWq.js.map +0 -1
  104. package/dist/components/header/index.cjs.js +0 -1
  105. package/dist/components/header/index.d.ts +0 -2
  106. package/dist/components/header/index.d.ts.map +0 -1
  107. package/dist/components/header/index.esm.js +0 -3
  108. package/dist/components/header.js +0 -2
  109. package/dist/lib/features.cjs.js +0 -2
  110. package/dist/lib/features.cjs.js.map +0 -1
  111. package/dist/lib/features.d.ts +0 -8
  112. package/dist/lib/features.d.ts.map +0 -1
  113. package/dist/lib/features.esm.js +0 -6
  114. package/dist/lib/features.esm.js.map +0 -1
  115. package/dist/v2/components/actions/button/Button.d.ts +0 -97
  116. package/dist/v2/components/actions/button/Button.d.ts.map +0 -1
  117. package/dist/v2/components/actions/button/Button.test.d.ts +0 -1
  118. package/dist/v2/components/actions/button/Button.test.d.ts.map +0 -1
  119. package/dist/v2/components/actions/button/index.d.ts +0 -8
  120. package/dist/v2/components/actions/button/index.d.ts.map +0 -1
  121. package/dist/v2/components/auth/loginButton/LoginButton.cjs.js +0 -414
  122. package/dist/v2/components/auth/loginButton/LoginButton.cjs.js.map +0 -1
  123. package/dist/v2/components/auth/loginButton/LoginButton.esm.js +0 -519
  124. package/dist/v2/components/auth/loginButton/LoginButton.esm.js.map +0 -1
  125. package/dist/v2/components/auth/loginButton/downArrow.cjs.js +0 -9
  126. package/dist/v2/components/auth/loginButton/downArrow.cjs.js.map +0 -1
  127. package/dist/v2/components/auth/loginButton/downArrow.esm.js +0 -14
  128. package/dist/v2/components/auth/loginButton/downArrow.esm.js.map +0 -1
  129. package/dist/v2/components/auth/loginButton/index.cjs.js +0 -2
  130. package/dist/v2/components/auth/loginButton/index.cjs.js.map +0 -1
  131. package/dist/v2/components/auth/loginButton/index.esm.js +0 -8
  132. package/dist/v2/components/auth/loginButton/index.esm.js.map +0 -1
  133. package/dist/v2/components/auth/signupButton/SignupButton.cjs.js +0 -59
  134. package/dist/v2/components/auth/signupButton/SignupButton.cjs.js.map +0 -1
  135. package/dist/v2/components/auth/signupButton/SignupButton.esm.js +0 -98
  136. package/dist/v2/components/auth/signupButton/SignupButton.esm.js.map +0 -1
  137. package/dist/v2/components/auth/signupButton/index.cjs.js +0 -2
  138. package/dist/v2/components/auth/signupButton/index.cjs.js.map +0 -1
  139. package/dist/v2/components/auth/signupButton/index.esm.js +0 -8
  140. package/dist/v2/components/auth/signupButton/index.esm.js.map +0 -1
  141. package/dist/v2/components/forms/combobox/Combobox.d.ts +0 -82
  142. package/dist/v2/components/forms/combobox/Combobox.d.ts.map +0 -1
  143. package/dist/v2/components/forms/combobox/Combobox.test.d.ts +0 -1
  144. package/dist/v2/components/forms/combobox/Combobox.test.d.ts.map +0 -1
  145. package/dist/v2/components/forms/combobox/comboboxTypes.d.ts +0 -6
  146. package/dist/v2/components/forms/combobox/comboboxTypes.d.ts.map +0 -1
  147. package/dist/v2/components/forms/combobox/index.d.ts +0 -3
  148. package/dist/v2/components/forms/combobox/index.d.ts.map +0 -1
  149. package/dist/v2/components/forms/select/Select.d.ts +0 -68
  150. package/dist/v2/components/forms/select/Select.d.ts.map +0 -1
  151. package/dist/v2/components/forms/select/Select.test.d.ts +0 -1
  152. package/dist/v2/components/forms/select/Select.test.d.ts.map +0 -1
  153. package/dist/v2/components/forms/select/index.d.ts +0 -3
  154. package/dist/v2/components/forms/select/index.d.ts.map +0 -1
  155. package/dist/v2/components/forms/shared/downArrow.d.ts +0 -2
  156. package/dist/v2/components/forms/shared/downArrow.d.ts.map +0 -1
  157. package/dist/v2/components/forms/shared/keyboard.d.ts +0 -7
  158. package/dist/v2/components/forms/shared/keyboard.d.ts.map +0 -1
  159. package/dist/v2/components/forms/shared/listboxStyles.d.ts +0 -2
  160. package/dist/v2/components/forms/shared/listboxStyles.d.ts.map +0 -1
  161. package/dist/v2/components/forms/shared/listboxTemplate.d.ts +0 -11
  162. package/dist/v2/components/forms/shared/listboxTemplate.d.ts.map +0 -1
  163. package/dist/v2/components/forms/shared/optionTypes.d.ts +0 -6
  164. package/dist/v2/components/forms/shared/optionTypes.d.ts.map +0 -1
  165. package/dist/v2/components/layout/header/Header.cjs.js +0 -625
  166. package/dist/v2/components/layout/header/Header.cjs.js.map +0 -1
  167. package/dist/v2/components/layout/header/Header.d.ts +0 -160
  168. package/dist/v2/components/layout/header/Header.d.ts.map +0 -1
  169. package/dist/v2/components/layout/header/Header.esm.js +0 -873
  170. package/dist/v2/components/layout/header/Header.esm.js.map +0 -1
  171. package/dist/v2/components/layout/header/header.test.d.ts +0 -1
  172. package/dist/v2/components/layout/header/header.test.d.ts.map +0 -1
  173. package/dist/v2/components/layout/header/index.cjs.js +0 -2
  174. package/dist/v2/components/layout/header/index.cjs.js.map +0 -1
  175. package/dist/v2/components/layout/header/index.d.ts +0 -4
  176. package/dist/v2/components/layout/header/index.d.ts.map +0 -1
  177. package/dist/v2/components/layout/header/index.esm.js +0 -8
  178. package/dist/v2/components/layout/header/index.esm.js.map +0 -1
@@ -1 +0,0 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../v2/components/layout/header/Header.cjs.js");require("../../v2/components/layout/header/index.cjs.js"),exports.Header=e.Header;
@@ -1,2 +0,0 @@
1
- export * from '../../v2/components/layout/header';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/header/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA"}
@@ -1,3 +0,0 @@
1
- import { Header as e } from "../../v2/components/layout/header/Header.esm.js";
2
- import "../../v2/components/layout/header/index.esm.js";
3
- export { e as Header };
@@ -1,2 +0,0 @@
1
- import { t as e } from "../chunks/header-COBaJDdB.js";
2
- export { e as Header };
@@ -1,2 +0,0 @@
1
- var e={DESIGN_SYSTEM_HEADER_ACCOUNT:!0};exports.default=e;
2
- //# sourceMappingURL=features.cjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"features.cjs.js","names":[],"sources":["../../src/lib/features.ts"],"sourcesContent":["/**\n * This file is used to enable or disable experimental features using feature flags.\n */\n\nconst Features = {\n DESIGN_SYSTEM_HEADER_ACCOUNT: true,\n}\n\nexport default Features\n"],"mappings":"AAIA,IAAM,EAAW,CACf,6BAA8B,EAChC"}
@@ -1,8 +0,0 @@
1
- /**
2
- * This file is used to enable or disable experimental features using feature flags.
3
- */
4
- declare const Features: {
5
- DESIGN_SYSTEM_HEADER_ACCOUNT: boolean;
6
- };
7
- export default Features;
8
- //# sourceMappingURL=features.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"features.d.ts","sourceRoot":"","sources":["../../src/lib/features.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,QAAA,MAAM,QAAQ;;CAEb,CAAA;AAED,eAAe,QAAQ,CAAA"}
@@ -1,6 +0,0 @@
1
- //#region src/lib/features.ts
2
- var e = { DESIGN_SYSTEM_HEADER_ACCOUNT: !0 };
3
- //#endregion
4
- export { e as default };
5
-
6
- //# sourceMappingURL=features.esm.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"features.esm.js","names":[],"sources":["../../src/lib/features.ts"],"sourcesContent":["/**\n * This file is used to enable or disable experimental features using feature flags.\n */\n\nconst Features = {\n DESIGN_SYSTEM_HEADER_ACCOUNT: true,\n}\n\nexport default Features\n"],"mappings":";AAIA,IAAM,IAAW,EACf,8BAA8B,GAChC"}
@@ -1,97 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class Button extends LitElement {
3
- static properties: {
4
- label: {
5
- type: StringConstructor;
6
- reflect: boolean;
7
- };
8
- type: {
9
- type: StringConstructor;
10
- reflect: boolean;
11
- };
12
- disabled: {
13
- type: BooleanConstructor;
14
- reflect: boolean;
15
- };
16
- selected: {
17
- type: BooleanConstructor;
18
- reflect: boolean;
19
- };
20
- ariaLabel: {
21
- type: StringConstructor;
22
- attribute: string;
23
- };
24
- name: {
25
- type: StringConstructor;
26
- reflect: boolean;
27
- };
28
- value: {
29
- type: StringConstructor;
30
- reflect: boolean;
31
- };
32
- variant: {
33
- type: StringConstructor;
34
- reflect: boolean;
35
- };
36
- size: {
37
- type: StringConstructor;
38
- reflect: boolean;
39
- };
40
- theme: {
41
- type: StringConstructor;
42
- reflect: boolean;
43
- };
44
- fullWidth: {
45
- type: BooleanConstructor;
46
- attribute: string;
47
- reflect: boolean;
48
- };
49
- icon: {
50
- type: StringConstructor;
51
- reflect: boolean;
52
- };
53
- iconPosition: {
54
- type: StringConstructor;
55
- attribute: string;
56
- reflect: boolean;
57
- };
58
- contentAlign: {
59
- type: StringConstructor;
60
- attribute: string;
61
- reflect: boolean;
62
- };
63
- handleClick: {
64
- attribute: boolean;
65
- };
66
- _hasSlottedIcon: {
67
- state: boolean;
68
- };
69
- };
70
- static styles: import('lit').CSSResult;
71
- label: string;
72
- type: 'button' | 'submit' | 'reset';
73
- disabled: boolean;
74
- selected: boolean;
75
- ariaLabel: string;
76
- name: string;
77
- value: string;
78
- variant: 'primary' | 'secondary' | 'icon';
79
- size: 'sm' | 'md' | 'lg';
80
- theme: 'light' | 'dark';
81
- fullWidth: boolean;
82
- icon: string;
83
- iconPosition: 'start' | 'end';
84
- contentAlign: 'start' | 'center' | 'end';
85
- handleClick?: (event: MouseEvent) => void;
86
- _hasSlottedIcon: boolean;
87
- private _iconSlotObserver?;
88
- constructor();
89
- connectedCallback(): void;
90
- disconnectedCallback(): void;
91
- private _handleButtonClick;
92
- private _handleIconSlotChange;
93
- private _syncSlottedIconPresence;
94
- private _renderIcon;
95
- render(): import('lit-html').TemplateResult<1>;
96
- }
97
- //# sourceMappingURL=Button.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/v2/components/actions/button/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;AAEpD,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiBhB;IAED,MAAM,CAAC,MAAM,0BA4NZ;IAEO,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAA;IACzC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACxB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,OAAO,GAAG,KAAK,CAAA;IAC7B,YAAY,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACxC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC,eAAe,EAAE,OAAO,CAAA;IAChC,OAAO,CAAC,iBAAiB,CAAC,CAAkB;;IAsB5C,iBAAiB;IAejB,oBAAoB;IAMpB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,WAAW;IAenB,MAAM;CAqBP"}
@@ -1 +0,0 @@
1
- //# sourceMappingURL=Button.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.test.d.ts","sourceRoot":"","sources":["../../../../../src/v2/components/actions/button/Button.test.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,CAAA"}
@@ -1,8 +0,0 @@
1
- import { Button } from './Button';
2
- export { Button };
3
- declare global {
4
- interface HTMLElementTagNameMap {
5
- 'solid-ui-button': Button;
6
- }
7
- }
8
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v2/components/actions/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,MAAM,EAAE,CAAA;AAIjB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,MAAM,CAAA;KAC1B;CACF"}
@@ -1,414 +0,0 @@
1
- const e=require("./downArrow.cjs.js");let t=require("solid-logic"),n=require("lit");var r=class extends n.LitElement{static properties={label:{type:String,reflect:!0},theme:{type:String,reflect:!0},issuerUrl:{type:String,attribute:`issuer-url`,reflect:!0},icon:{type:String,reflect:!0},layout:{type:String,reflect:!0},_popupOpen:{state:!0},_issuerInputValue:{state:!0},_dropdownOpen:{state:!0}};static styles=n.css`
2
- :host { /* default theme */
3
- display: inline-block;
4
- position: relative;
5
- z-index: 400;
6
- --login-button-background: var(--lavender-900, #7c4cff);
7
- --login-button-text: var(--color-header-text, #ffffff);
8
- --popup-background: var(--color-background, #F8F9FB);
9
- --popup-text: var(--color-text, #1A1A1A);
10
- --popup-border: var(--color-border, #E5E7EB);
11
- --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
12
- --popup-overlay-background: rgba(0, 0, 0, 0.6);
13
- --issuer-input-background: var(--color-background, #F8F9FB);
14
- --issuer-input-text: var(--color-text, #1A1A1A);
15
- --issuer-input-border: var(--color-text, #1A1A1A);
16
- --issuer-button-background: var(--color-background, #F8F9FB);
17
- --issuer-button-text: var(--color-text, #1A1A1A);
18
- --issuer-button-border: var(--color-border, #E5E7EB);
19
- --issuer-button-hover-background: var(--lavender-900, #7c4cff);
20
- --issuer-label-color: var(--grey-purple-700, #1A1A1A);
21
- --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
22
- --error-text-color: var(--color-error, #B00020);
23
- }
24
-
25
- :host([theme='dark']) {
26
- display: inline-block;
27
- position: relative;
28
- z-index: 900;
29
- --login-button-background: var(--lavender-900, #7c4cff);
30
- --login-button-text: var(--color-header-text, #ffffff);
31
- --popup-background: var(--color-background, #F8F9FB);
32
- --popup-text: var(--color-text, #1A1A1A);
33
- --popup-border: var(--color-border, #E5E7EB);
34
- --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
35
- --popup-overlay-background: rgba(0, 0, 0, 0.6);
36
- --issuer-input-background: var(--color-background, #F8F9FB);
37
- --issuer-input-text: var(--color-text, #1A1A1A);
38
- --issuer-input-border: var(--color-text, #1A1A1A);
39
- --issuer-button-background: var(--color-background, #F8F9FB);
40
- --issuer-button-text: var(--color-text, #1A1A1A);
41
- --issuer-button-border: var(--color-text, #1A1A1A);
42
- --issuer-button-hover-background: var(--lavender-900, #7c4cff);
43
- --issuer-label-color: var(--grey-purple-700, #1A1A1A);
44
- --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
45
- --error-text-color: var(--color-error, #B00020);
46
- }
47
-
48
- .login-button {
49
- display: flex;
50
- height: 35px;
51
- padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
52
- align-items: center;
53
- gap: var(--spacing-xxs, 0.3125rem);
54
- border-radius: var(--border-radius-base, 0.3125rem);
55
- background: var(--login-button-background);
56
- border: none;
57
- color: var(--login-button-text);
58
- cursor: pointer;
59
- font: inherit;
60
- line-height: 1;
61
- white-space: nowrap;
62
- text-decoration: none;
63
- box-sizing: border-box;
64
- transition: transform 0.2s ease;
65
- }
66
-
67
- .login-button-icon {
68
- width: 16px;
69
- height: 16px;
70
- display: inline-block;
71
- object-fit: contain;
72
- }
73
-
74
- .login-button:active {
75
- transform: translateY(1px);
76
- }
77
-
78
- .popup-dialog {
79
- border: none;
80
- padding: 0;
81
- background: transparent;
82
- outline: none;
83
- overflow: visible;
84
- width: min(30rem, calc(100vw - 2rem));
85
- max-width: calc(100vw - 2rem);
86
- max-height: calc(100dvh - 2rem);
87
- }
88
-
89
- .popup-dialog::backdrop {
90
- background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));
91
- }
92
-
93
- .popup-box {
94
- background: var(--popup-background);
95
- color: var(--popup-text);
96
- box-shadow: var(--popup-shadow);
97
- border: 1px solid var(--popup-border);
98
- border-radius: var(--border-radius-md, 0.5rem);
99
- width: min(30rem, calc(100vw - 2rem));
100
- min-width: min(30rem, calc(100vw - 2rem));
101
- max-width: calc(100vw - 2rem);
102
- max-height: calc(100dvh - 2rem);
103
- overflow: auto;
104
- z-index: 1001;
105
- }
106
-
107
- .popup-top-menu {
108
- border-bottom: 1px solid #DDD;
109
- display: flex;
110
- flex-direction: row;
111
- align-items: center;
112
- justify-content: space-between;
113
- padding-bottom: 8px;
114
- margin-bottom: 8px;
115
- padding: 1rem;
116
- background: var(--gray-200, #E5E7EB);
117
- }
118
-
119
- .popup-title {
120
- font-weight: 800;
121
- }
122
-
123
- .popup-close {
124
- background: transparent;
125
- border: none;
126
- cursor: pointer;
127
- font-size: 1.25rem;
128
- line-height: 1;
129
- padding: 0 0.25rem;
130
- }
131
-
132
- .issuer-text-section {
133
- display: flex;
134
- flex-direction: column;
135
- padding: 1rem 1rem 1.75rem;
136
- }
137
-
138
- .issuer-text-label {
139
- color: var(--issuer-label-color);
140
- margin-bottom: 6px;
141
- }
142
-
143
- .issuer-text-row {
144
- display: flex;
145
- flex-direction: row;
146
- gap: 6px;
147
- align-items: flex-start;
148
- }
149
-
150
- .issuer-input-wrapper {
151
- flex: 1;
152
- display: flex;
153
- flex-direction: column;
154
- min-width: 0;
155
- position: relative;
156
- }
157
-
158
- .issuer-input-field-row {
159
- display: flex;
160
- flex-direction: row;
161
- position: relative;
162
- }
163
-
164
- .issuer-text-input {
165
- flex: 1;
166
- padding: 0.375rem 2.75rem 0.375rem 0.5rem;
167
- border: 1px solid var(--issuer-input-border);
168
- border-radius: var(--border-radius-base, 0.3125rem);
169
- background: var(--issuer-input-background);
170
- color: var(--issuer-input-text);
171
- font: inherit;
172
- min-width: 0;
173
- }
174
-
175
- .issuer-text-input::placeholder {
176
- color: var(--issuer-placeholder-color);
177
- }
178
-
179
- .issuer-dropdown-toggle {
180
- position: absolute;
181
- right: 6px;
182
- top: 50%;
183
- transform: translateY(-50%);
184
- width: 26px;
185
- height: 26px;
186
- padding: 0;
187
- border: none;
188
- background: transparent;
189
- cursor: pointer;
190
- display: flex;
191
- align-items: center;
192
- justify-content: center;
193
- flex-shrink: 0;
194
- border-radius: var(--border-radius-base, 0.3125rem);
195
- }
196
-
197
- .issuer-dropdown-toggle:hover {
198
- background: var(--color-header-menu-item-hover, #e6dcff);
199
- }
200
-
201
- .issuer-dropdown-toggle svg {
202
- width: 14px;
203
- height: 14px;
204
- display: block;
205
- }
206
-
207
- .issuer-dropdown-list {
208
- position: absolute;
209
- top: calc(100% + 6px);
210
- left: 0;
211
- right: 0;
212
- border: 1px solid var(--color-border, #E5E7EB);
213
- border-top: none;
214
- border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);
215
- background: var(--issuer-input-background);
216
- overflow: visible;
217
- z-index: 10;
218
- box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
219
- }
220
-
221
- .issuer-dropdown-item {
222
- display: block;
223
- width: 100%;
224
- padding: 0.625rem 0.75rem;
225
- border: none;
226
- border-bottom: 1px solid var(--color-border, #E5E7EB);
227
- background: transparent;
228
- color: var(--issuer-button-text);
229
- cursor: pointer;
230
- font: inherit;
231
- text-align: left;
232
- box-sizing: border-box;
233
- }
234
-
235
- .issuer-dropdown-item:last-child {
236
- border-bottom: none;
237
- }
238
-
239
- .issuer-dropdown-item:hover {
240
- background: var(--color-header-menu-item-hover, #e6dcff);
241
- border-radius: var(--border-radius-base-md, 0.5rem);
242
- }
243
-
244
- .popup-footer {
245
- display: flex;
246
- flex-direction: row;
247
- justify-content: center;
248
- gap: 8px;
249
- padding: 0.75rem 1rem 1rem;
250
- }
251
-
252
- .popup-footer-hr {
253
- margin: 0;
254
- border: none;
255
- border-top: 1px solid var(--popup-border, #E5E7EB);
256
- }
257
-
258
- .popup-cancel-button {
259
- padding: 0.5rem 1.25rem;
260
- border: 1px solid #C0BFC7;
261
- border-radius: var(--border-radius-base, 0.3125rem);
262
- background: var(--popup-background);
263
- color: #314158;
264
- cursor: pointer;
265
- font: inherit;
266
- }
267
-
268
- .popup-cancel-button:hover {
269
- background: #D1D5DB;
270
- }
271
-
272
- .popup-login-button {
273
- padding: 0.5rem 1.25rem;
274
- border: none;
275
- border-radius: var(--border-radius-base, 0.3125rem);
276
- background: var(--lavender-900, #7c4cff);
277
- color: #ffffff;
278
- cursor: pointer;
279
- font: inherit;
280
- }
281
-
282
- .popup-login-button:hover {
283
- background: #6a3de8;
284
- }
285
-
286
- .popup-login-button:disabled {
287
- opacity: 0.5;
288
- cursor: not-allowed;
289
- }
290
-
291
- .error-msg {
292
- color: var(--error-text-color);
293
- font-size: 0.875rem;
294
- margin-top: 8px;
295
- }
296
-
297
- @media (max-width: 40rem) {
298
- .popup-dialog {
299
- width: calc(100vw - 1rem);
300
- max-width: calc(100vw - 1rem);
301
- max-height: calc(100dvh - 1rem);
302
- }
303
-
304
- .popup-box {
305
- width: calc(100vw - 1rem);
306
- min-width: 0;
307
- max-width: calc(100vw - 1rem);
308
- max-height: calc(100dvh - 1rem);
309
- border-radius: var(--border-radius-base, 0.3125rem);
310
- }
311
-
312
- .popup-top-menu,
313
- .issuer-text-section,
314
- .popup-footer {
315
- padding-left: 0.75rem;
316
- padding-right: 0.75rem;
317
- }
318
-
319
- .popup-footer {
320
- flex-wrap: wrap;
321
- gap: 0.625rem;
322
- }
323
-
324
- .popup-footer > button {
325
- flex: 1 1 100%;
326
- }
327
-
328
- .issuer-text-row,
329
- .issuer-input-field-row {
330
- width: 100%;
331
- }
332
- }
333
- `;_issuerInputId=`issuer-url-input-${Math.random().toString(36).slice(2,10)}`;_errorMsg=``;constructor(){super(),this.label=`Log In`,this.theme=`light`,this.issuerUrl=``,this.icon=``,this.layout=`desktop`,this._popupOpen=!1,this._issuerInputValue=``,this._dropdownOpen=!1}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}_openPopup(){let e=(0,t.offlineTestID)();if(e){this._loginComplete(e.uri);return}this._issuerInputValue=typeof localStorage<`u`&&localStorage.getItem(`loginIssuer`)||this.issuerUrl||``,this._errorMsg=``,this._popupOpen=!0}_closePopup(){this._popupOpen=!1}updated(){let e=this.shadowRoot?.querySelector(`dialog`);e&&(this._popupOpen&&!e.open?e.showModal():!this._popupOpen&&e.open&&e.close())}async _loginToIssuer(e){if(e)try{t.solidLogicSingleton.store.updater.flagAuthorizationMetadata();let n=new URL(window.location.href).hash;n&&window.localStorage.setItem(`preLoginRedirectHash`,n),window.localStorage.setItem(`loginIssuer`,e);let r=new URL(window.location.href);r.hash=``,await t.authSession.login(e,r.href)}catch(e){this._errorMsg=e.message||String(e),this.requestUpdate()}}_loginComplete(e){t.authn.saveUser(e),this.dispatchEvent(new CustomEvent(`login-success`,{detail:{webId:e},bubbles:!0,composed:!0}))}_handleGoClick(){this._dropdownOpen=!1,this._loginToIssuer(this._issuerInputValue)}_toggleDropdown(){this._dropdownOpen=!this._dropdownOpen}_selectIssuerFromDropdown(e){this._issuerInputValue=e,this._dropdownOpen=!1}_handleInputChange(e){this._issuerInputValue=e.target.value}_handleInputKeydown(e){e.key===`Enter`&&this._loginToIssuer(this._issuerInputValue),e.key===`Escape`&&this._closePopup()}_renderPopup(){let r=(0,t.getSuggestedIssuers)();return n.html`
334
- <div class="popup-box">
335
- <div class="popup-top-menu">
336
- <span class="popup-title">Select an identity provider</span>
337
- <button class="popup-close" type="button" aria-label="Close" @click="${()=>this._closePopup()}">&#x2715;</button>
338
- </div>
339
-
340
- <div class="issuer-text-section">
341
- <label class="issuer-text-label" for="${this._issuerInputId}">Solid Identity Provider</label>
342
- <div class="issuer-text-row">
343
- <div class="issuer-input-wrapper">
344
- <div class="issuer-input-field-row">
345
- <input
346
- id="${this._issuerInputId}"
347
- class="issuer-text-input"
348
- type="text"
349
- placeholder="https://example.com"
350
- .value="${this._issuerInputValue}"
351
- @input="${this._handleInputChange}"
352
- @keydown="${this._handleInputKeydown}"
353
- autocomplete="url"
354
- />
355
- ${r.length?n.html`
356
- <button
357
- class="issuer-dropdown-toggle"
358
- type="button"
359
- aria-label="Show identity provider suggestions"
360
- aria-expanded="${this._dropdownOpen}"
361
- @click="${()=>this._toggleDropdown()}"
362
- >${e.phoneIcon}</button>
363
- `:``}
364
- </div>
365
- ${this._dropdownOpen&&r.length?n.html`
366
- <div class="issuer-dropdown-list" role="listbox">
367
- ${r.map(e=>n.html`
368
- <button
369
- class="issuer-dropdown-item"
370
- type="button"
371
- role="option"
372
- @click="${()=>this._selectIssuerFromDropdown(e.uri)}"
373
- >${e.name}</button>
374
- `)}
375
- </div>
376
- `:``}
377
- </div>
378
- </div>
379
- ${this._errorMsg?n.html`<div class="error-msg">${this._errorMsg}</div>`:``}
380
- </div>
381
- <hr class="popup-footer-hr" />
382
- <div class="popup-footer">
383
- <button class="popup-cancel-button" type="button" @click="${()=>this._closePopup()}">Cancel</button>
384
- <button
385
- class="popup-login-button"
386
- type="button"
387
- ?disabled="${!this._issuerInputValue}"
388
- @click="${()=>this._handleGoClick()}"
389
- >Log In</button>
390
- </div>
391
- </div>
392
- `}render(){return n.html`
393
- <button
394
- class="login-button"
395
- type="button"
396
- part="login-button"
397
- @click="${()=>this._openPopup()}"
398
- >
399
- ${this.icon?n.html`<img class="login-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="login-button-icon" />`:``}
400
- <slot>${this.label}</slot>
401
- </button>
402
-
403
- <dialog
404
- class="popup-dialog"
405
- role="dialog"
406
- aria-modal="true"
407
- aria-label="Select an identity provider"
408
- @cancel="${e=>{e.preventDefault(),this._closePopup()}}"
409
- @click="${e=>{e.target===e.currentTarget&&this._closePopup()}}"
410
- >
411
- ${this._popupOpen?this._renderPopup():``}
412
- </dialog>
413
- `}};exports.LoginButton=r;
414
- //# sourceMappingURL=LoginButton.cjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LoginButton.cjs.js","names":[],"sources":["../../../../../src/v2/components/auth/loginButton/LoginButton.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { authSession, authn, getSuggestedIssuers, offlineTestID, solidLogicSingleton } from 'solid-logic'\nimport { phoneIcon as downArrowIcon } from './downArrow'\n\nexport class LoginButton extends LitElement {\n static properties = {\n label: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n issuerUrl: { type: String, attribute: 'issuer-url', reflect: true },\n icon: { type: String, reflect: true },\n layout: { type: String, reflect: true },\n _popupOpen: { state: true },\n _issuerInputValue: { state: true },\n _dropdownOpen: { state: true }\n }\n\n static styles = css`\n :host { /* default theme */\n display: inline-block;\n position: relative;\n z-index: 400;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-border, #E5E7EB);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n :host([theme='dark']) {\n display: inline-block;\n position: relative;\n z-index: 900;\n --login-button-background: var(--lavender-900, #7c4cff);\n --login-button-text: var(--color-header-text, #ffffff);\n --popup-background: var(--color-background, #F8F9FB);\n --popup-text: var(--color-text, #1A1A1A);\n --popup-border: var(--color-border, #E5E7EB);\n --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));\n --popup-overlay-background: rgba(0, 0, 0, 0.6);\n --issuer-input-background: var(--color-background, #F8F9FB);\n --issuer-input-text: var(--color-text, #1A1A1A);\n --issuer-input-border: var(--color-text, #1A1A1A);\n --issuer-button-background: var(--color-background, #F8F9FB);\n --issuer-button-text: var(--color-text, #1A1A1A);\n --issuer-button-border: var(--color-text, #1A1A1A);\n --issuer-button-hover-background: var(--lavender-900, #7c4cff);\n --issuer-label-color: var(--grey-purple-700, #1A1A1A);\n --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;\n --error-text-color: var(--color-error, #B00020);\n }\n\n .login-button {\n display: flex;\n height: 35px;\n padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);\n align-items: center;\n gap: var(--spacing-xxs, 0.3125rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--login-button-background);\n border: none;\n color: var(--login-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n white-space: nowrap;\n text-decoration: none;\n box-sizing: border-box;\n transition: transform 0.2s ease;\n }\n\n .login-button-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n }\n\n .login-button:active {\n transform: translateY(1px);\n }\n\n .popup-dialog {\n border: none;\n padding: 0;\n background: transparent;\n outline: none;\n overflow: visible;\n width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n }\n\n .popup-dialog::backdrop {\n background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));\n }\n\n .popup-box {\n background: var(--popup-background);\n color: var(--popup-text);\n box-shadow: var(--popup-shadow);\n border: 1px solid var(--popup-border);\n border-radius: var(--border-radius-md, 0.5rem);\n width: min(30rem, calc(100vw - 2rem));\n min-width: min(30rem, calc(100vw - 2rem));\n max-width: calc(100vw - 2rem);\n max-height: calc(100dvh - 2rem);\n overflow: auto;\n z-index: 1001;\n }\n\n .popup-top-menu {\n border-bottom: 1px solid #DDD;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-bottom: 8px;\n margin-bottom: 8px;\n padding: 1rem;\n background: var(--gray-200, #E5E7EB);\n }\n\n .popup-title {\n font-weight: 800;\n }\n\n .popup-close {\n background: transparent;\n border: none;\n cursor: pointer;\n font-size: 1.25rem;\n line-height: 1;\n padding: 0 0.25rem;\n }\n\n .issuer-text-section {\n display: flex;\n flex-direction: column;\n padding: 1rem 1rem 1.75rem;\n }\n\n .issuer-text-label {\n color: var(--issuer-label-color);\n margin-bottom: 6px;\n }\n\n .issuer-text-row {\n display: flex;\n flex-direction: row;\n gap: 6px;\n align-items: flex-start;\n }\n\n .issuer-input-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n position: relative;\n }\n\n .issuer-input-field-row {\n display: flex;\n flex-direction: row;\n position: relative;\n }\n\n .issuer-text-input {\n flex: 1;\n padding: 0.375rem 2.75rem 0.375rem 0.5rem;\n border: 1px solid var(--issuer-input-border);\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n color: var(--issuer-input-text);\n font: inherit;\n min-width: 0;\n }\n\n .issuer-text-input::placeholder {\n color: var(--issuer-placeholder-color);\n }\n\n .issuer-dropdown-toggle {\n position: absolute;\n right: 6px;\n top: 50%;\n transform: translateY(-50%);\n width: 26px;\n height: 26px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .issuer-dropdown-toggle:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n }\n\n .issuer-dropdown-toggle svg {\n width: 14px;\n height: 14px;\n display: block;\n }\n\n .issuer-dropdown-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n right: 0;\n border: 1px solid var(--color-border, #E5E7EB);\n border-top: none;\n border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);\n background: var(--issuer-input-background);\n overflow: visible;\n z-index: 10;\n box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);\n }\n\n .issuer-dropdown-item {\n display: block;\n width: 100%;\n padding: 0.625rem 0.75rem;\n border: none;\n border-bottom: 1px solid var(--color-border, #E5E7EB);\n background: transparent;\n color: var(--issuer-button-text);\n cursor: pointer;\n font: inherit;\n text-align: left;\n box-sizing: border-box;\n }\n\n .issuer-dropdown-item:last-child {\n border-bottom: none;\n }\n\n .issuer-dropdown-item:hover {\n background: var(--color-header-menu-item-hover, #e6dcff);\n border-radius: var(--border-radius-base-md, 0.5rem);\n }\n\n .popup-footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 8px;\n padding: 0.75rem 1rem 1rem;\n }\n\n .popup-footer-hr {\n margin: 0;\n border: none;\n border-top: 1px solid var(--popup-border, #E5E7EB);\n }\n\n .popup-cancel-button {\n padding: 0.5rem 1.25rem;\n border: 1px solid #C0BFC7;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--popup-background);\n color: #314158;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-cancel-button:hover {\n background: #D1D5DB;\n }\n\n .popup-login-button {\n padding: 0.5rem 1.25rem;\n border: none;\n border-radius: var(--border-radius-base, 0.3125rem);\n background: var(--lavender-900, #7c4cff);\n color: #ffffff;\n cursor: pointer;\n font: inherit;\n }\n\n .popup-login-button:hover {\n background: #6a3de8;\n }\n\n .popup-login-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .error-msg {\n color: var(--error-text-color);\n font-size: 0.875rem;\n margin-top: 8px;\n }\n\n @media (max-width: 40rem) {\n .popup-dialog {\n width: calc(100vw - 1rem);\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n }\n\n .popup-box {\n width: calc(100vw - 1rem);\n min-width: 0;\n max-width: calc(100vw - 1rem);\n max-height: calc(100dvh - 1rem);\n border-radius: var(--border-radius-base, 0.3125rem);\n }\n\n .popup-top-menu,\n .issuer-text-section,\n .popup-footer {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n }\n\n .popup-footer {\n flex-wrap: wrap;\n gap: 0.625rem;\n }\n\n .popup-footer > button {\n flex: 1 1 100%;\n }\n\n .issuer-text-row,\n .issuer-input-field-row {\n width: 100%;\n }\n }\n `\n\n declare label: string\n declare theme: 'light' | 'dark'\n declare issuerUrl: string\n declare icon: string\n declare layout: 'desktop' | 'mobile'\n declare _popupOpen: boolean\n declare _issuerInputValue: string\n declare _dropdownOpen: boolean\n\n private _issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`\n private _errorMsg = ''\n\n constructor () {\n super()\n this.label = 'Log In'\n this.theme = 'light'\n this.issuerUrl = ''\n this.icon = ''\n this.layout = 'desktop'\n this._popupOpen = false\n this._issuerInputValue = ''\n this._dropdownOpen = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n }\n\n disconnectedCallback () {\n super.disconnectedCallback()\n }\n\n private _openPopup () {\n const offline = offlineTestID()\n if (offline) {\n this._loginComplete(offline.uri)\n return\n }\n this._issuerInputValue = (typeof localStorage !== 'undefined' && localStorage.getItem('loginIssuer')) || this.issuerUrl || ''\n this._errorMsg = ''\n this._popupOpen = true\n }\n\n private _closePopup () {\n this._popupOpen = false\n }\n\n updated () {\n const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement | null\n if (!dialog) return\n if (this._popupOpen && !dialog.open) {\n dialog.showModal()\n } else if (!this._popupOpen && dialog.open) {\n dialog.close()\n }\n }\n\n private async _loginToIssuer (issuerUri: string) {\n if (!issuerUri) return\n try {\n // clear authorization metadata from store\n ;(solidLogicSingleton.store.updater as any).flagAuthorizationMetadata()\n\n const preLoginRedirectHash = new URL(window.location.href).hash\n if (preLoginRedirectHash) {\n window.localStorage.setItem('preLoginRedirectHash', preLoginRedirectHash)\n }\n window.localStorage.setItem('loginIssuer', issuerUri)\n\n const locationUrl = new URL(window.location.href)\n locationUrl.hash = ''\n await authSession.login(issuerUri, locationUrl.href)\n } catch (err: any) {\n this._errorMsg = err.message || String(err)\n this.requestUpdate()\n }\n }\n\n private _loginComplete (webIdUri: string) {\n authn.saveUser(webIdUri)\n this.dispatchEvent(new CustomEvent('login-success', {\n detail: { webId: webIdUri },\n bubbles: true,\n composed: true\n }))\n }\n\n private _handleGoClick () {\n this._dropdownOpen = false\n this._loginToIssuer(this._issuerInputValue)\n }\n\n private _toggleDropdown () {\n this._dropdownOpen = !this._dropdownOpen\n }\n\n private _selectIssuerFromDropdown (uri: string) {\n this._issuerInputValue = uri\n this._dropdownOpen = false\n }\n\n private _handleInputChange (e: Event) {\n this._issuerInputValue = (e.target as HTMLInputElement).value\n }\n\n private _handleInputKeydown (e: KeyboardEvent) {\n if (e.key === 'Enter') {\n this._loginToIssuer(this._issuerInputValue)\n }\n if (e.key === 'Escape') {\n this._closePopup()\n }\n }\n\n private _renderPopup () {\n const suggestedIssuers = getSuggestedIssuers()\n return html`\n <div class=\"popup-box\">\n <div class=\"popup-top-menu\">\n <span class=\"popup-title\">Select an identity provider</span>\n <button class=\"popup-close\" type=\"button\" aria-label=\"Close\" @click=\"${() => this._closePopup()}\">&#x2715;</button>\n </div>\n\n <div class=\"issuer-text-section\">\n <label class=\"issuer-text-label\" for=\"${this._issuerInputId}\">Solid Identity Provider</label>\n <div class=\"issuer-text-row\">\n <div class=\"issuer-input-wrapper\">\n <div class=\"issuer-input-field-row\">\n <input\n id=\"${this._issuerInputId}\"\n class=\"issuer-text-input\"\n type=\"text\"\n placeholder=\"https://example.com\"\n .value=\"${this._issuerInputValue}\"\n @input=\"${this._handleInputChange}\"\n @keydown=\"${this._handleInputKeydown}\"\n autocomplete=\"url\"\n />\n ${suggestedIssuers.length\n? html`\n <button\n class=\"issuer-dropdown-toggle\"\n type=\"button\"\n aria-label=\"Show identity provider suggestions\"\n aria-expanded=\"${this._dropdownOpen}\"\n @click=\"${() => this._toggleDropdown()}\"\n >${downArrowIcon}</button>\n `\n: ''}\n </div>\n ${this._dropdownOpen && suggestedIssuers.length\n? html`\n <div class=\"issuer-dropdown-list\" role=\"listbox\">\n ${suggestedIssuers.map(issuerInfo => html`\n <button\n class=\"issuer-dropdown-item\"\n type=\"button\"\n role=\"option\"\n @click=\"${() => this._selectIssuerFromDropdown(issuerInfo.uri)}\"\n >${issuerInfo.name}</button>\n `)}\n </div>\n `\n: ''}\n </div>\n </div>\n ${this._errorMsg ? html`<div class=\"error-msg\">${this._errorMsg}</div>` : ''}\n </div>\n <hr class=\"popup-footer-hr\" />\n <div class=\"popup-footer\">\n <button class=\"popup-cancel-button\" type=\"button\" @click=\"${() => this._closePopup()}\">Cancel</button>\n <button\n class=\"popup-login-button\"\n type=\"button\"\n ?disabled=\"${!this._issuerInputValue}\"\n @click=\"${() => this._handleGoClick()}\"\n >Log In</button>\n </div>\n </div>\n `\n }\n\n render () {\n return html`\n <button\n class=\"login-button\"\n type=\"button\"\n part=\"login-button\"\n @click=\"${() => this._openPopup()}\"\n >\n ${this.icon ? html`<img class=\"login-button-icon\" src=\"${this.icon}\" alt=\"\" aria-hidden=\"true\" part=\"login-button-icon\" />` : ''}\n <slot>${this.label}</slot>\n </button>\n\n <dialog\n class=\"popup-dialog\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Select an identity provider\"\n @cancel=\"${(e: Event) => { e.preventDefault(); this._closePopup() }}\"\n @click=\"${(e: MouseEvent) => { if (e.target === e.currentTarget) this._closePopup() }}\"\n >\n ${this._popupOpen ? this._renderPopup() : ''}\n </dialog>\n `\n }\n}\n"],"mappings":"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"}