@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11 → 1.0.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 (168) hide show
  1. package/package.json +2 -3
  2. package/src/components/alert/alert.ts +100 -100
  3. package/src/components/badge/badge.ts +96 -96
  4. package/src/components/breadcrumb/breadcrumb.ts +98 -98
  5. package/src/components/button/button.ts +281 -281
  6. package/src/components/button-group/button-group.ts +67 -67
  7. package/src/components/card/card.ts +52 -52
  8. package/src/components/checkbox/checkbox.ts +238 -238
  9. package/src/components/code-block/code-block.ts +256 -256
  10. package/src/components/content-card/content-card.ts +133 -133
  11. package/src/components/divider/divider.ts +68 -68
  12. package/src/components/drawer/drawer.ts +217 -217
  13. package/src/components/field/field.ts +30 -30
  14. package/src/components/footer/footer.ts +58 -58
  15. package/src/components/form/form-step.ts +32 -32
  16. package/src/components/form/form.ts +376 -376
  17. package/src/components/grid/grid-row.ts +75 -75
  18. package/src/components/grid/grid.ts +36 -36
  19. package/src/components/icon/icon-paths.ts +124 -124
  20. package/src/components/icon/icon.ts +82 -82
  21. package/src/components/input/input.ts +248 -248
  22. package/src/components/link/link.ts +97 -97
  23. package/src/components/metadata/metadata.ts +66 -66
  24. package/src/components/modal/modal.ts +158 -158
  25. package/src/components/page-layout/page-layout.ts +704 -704
  26. package/src/components/radio/radio.ts +142 -142
  27. package/src/components/radio-group/radio-group.ts +157 -157
  28. package/src/components/router/router.ts +46 -46
  29. package/src/components/select/select.ts +161 -161
  30. package/src/components/skeleton/skeleton.ts +67 -67
  31. package/src/components/switch/switch.ts +181 -181
  32. package/src/components/table/data-table.ts +556 -556
  33. package/src/components/table/table.ts +153 -153
  34. package/src/components/tabs/tab-panel.ts +30 -30
  35. package/src/components/tabs/tab.ts +76 -76
  36. package/src/components/tabs/tabs.ts +88 -88
  37. package/src/components/textarea/textarea.ts +215 -215
  38. package/src/components/theme-toggle/theme-toggle.ts +131 -131
  39. package/src/components/vertical-nav/vertical-nav-group.ts +96 -96
  40. package/src/components/vertical-nav/vertical-nav-item.ts +49 -49
  41. package/src/styles/globals.css +58 -58
  42. package/src/styles/index.css +80 -80
  43. package/src/styles/reset.ts +50 -50
  44. package/src/styles/theme.css +58 -58
  45. package/src/styles/typography.css +25 -25
  46. package/tsconfig.json +15 -15
  47. package/README.md +0 -8
  48. package/dist/components/alert/alert.d.ts +0 -13
  49. package/dist/components/alert/alert.d.ts.map +0 -1
  50. package/dist/components/alert/alert.js +0 -105
  51. package/dist/components/badge/badge.d.ts +0 -13
  52. package/dist/components/badge/badge.d.ts.map +0 -1
  53. package/dist/components/badge/badge.js +0 -101
  54. package/dist/components/breadcrumb/breadcrumb.d.ts +0 -19
  55. package/dist/components/breadcrumb/breadcrumb.d.ts.map +0 -1
  56. package/dist/components/breadcrumb/breadcrumb.js +0 -99
  57. package/dist/components/button/button.d.ts +0 -23
  58. package/dist/components/button/button.d.ts.map +0 -1
  59. package/dist/components/button/button.js +0 -304
  60. package/dist/components/button-group/button-group.d.ts +0 -6
  61. package/dist/components/button-group/button-group.d.ts.map +0 -1
  62. package/dist/components/button-group/button-group.js +0 -74
  63. package/dist/components/card/card.d.ts +0 -11
  64. package/dist/components/card/card.d.ts.map +0 -1
  65. package/dist/components/card/card.js +0 -54
  66. package/dist/components/checkbox/checkbox.d.ts +0 -28
  67. package/dist/components/checkbox/checkbox.d.ts.map +0 -1
  68. package/dist/components/checkbox/checkbox.js +0 -247
  69. package/dist/components/code-block/code-block.d.ts +0 -20
  70. package/dist/components/code-block/code-block.d.ts.map +0 -1
  71. package/dist/components/code-block/code-block.js +0 -260
  72. package/dist/components/content-card/content-card.d.ts +0 -13
  73. package/dist/components/content-card/content-card.d.ts.map +0 -1
  74. package/dist/components/content-card/content-card.js +0 -140
  75. package/dist/components/divider/divider.d.ts +0 -16
  76. package/dist/components/divider/divider.d.ts.map +0 -1
  77. package/dist/components/divider/divider.js +0 -82
  78. package/dist/components/drawer/drawer.d.ts +0 -22
  79. package/dist/components/drawer/drawer.d.ts.map +0 -1
  80. package/dist/components/drawer/drawer.js +0 -226
  81. package/dist/components/field/field.d.ts +0 -11
  82. package/dist/components/field/field.d.ts.map +0 -1
  83. package/dist/components/field/field.js +0 -32
  84. package/dist/components/footer/footer.d.ts +0 -6
  85. package/dist/components/footer/footer.d.ts.map +0 -1
  86. package/dist/components/footer/footer.js +0 -65
  87. package/dist/components/form/form-step.d.ts +0 -13
  88. package/dist/components/form/form-step.d.ts.map +0 -1
  89. package/dist/components/form/form-step.js +0 -41
  90. package/dist/components/form/form.d.ts +0 -25
  91. package/dist/components/form/form.d.ts.map +0 -1
  92. package/dist/components/form/form.js +0 -358
  93. package/dist/components/grid/grid-row.d.ts +0 -17
  94. package/dist/components/grid/grid-row.d.ts.map +0 -1
  95. package/dist/components/grid/grid-row.js +0 -92
  96. package/dist/components/grid/grid.d.ts +0 -13
  97. package/dist/components/grid/grid.d.ts.map +0 -1
  98. package/dist/components/grid/grid.js +0 -42
  99. package/dist/components/icon/icon-paths.d.ts +0 -116
  100. package/dist/components/icon/icon-paths.d.ts.map +0 -1
  101. package/dist/components/icon/icon-paths.js +0 -121
  102. package/dist/components/icon/icon.d.ts +0 -16
  103. package/dist/components/icon/icon.d.ts.map +0 -1
  104. package/dist/components/icon/icon.js +0 -95
  105. package/dist/components/input/input.d.ts +0 -31
  106. package/dist/components/input/input.d.ts.map +0 -1
  107. package/dist/components/input/input.js +0 -268
  108. package/dist/components/link/link.d.ts +0 -16
  109. package/dist/components/link/link.d.ts.map +0 -1
  110. package/dist/components/link/link.js +0 -116
  111. package/dist/components/metadata/metadata.d.ts +0 -18
  112. package/dist/components/metadata/metadata.d.ts.map +0 -1
  113. package/dist/components/metadata/metadata.js +0 -71
  114. package/dist/components/modal/modal.d.ts +0 -24
  115. package/dist/components/modal/modal.d.ts.map +0 -1
  116. package/dist/components/modal/modal.js +0 -163
  117. package/dist/components/page-layout/page-layout.d.ts +0 -46
  118. package/dist/components/page-layout/page-layout.d.ts.map +0 -1
  119. package/dist/components/page-layout/page-layout.js +0 -697
  120. package/dist/components/radio/radio.d.ts +0 -16
  121. package/dist/components/radio/radio.d.ts.map +0 -1
  122. package/dist/components/radio/radio.js +0 -152
  123. package/dist/components/radio-group/radio-group.d.ts +0 -27
  124. package/dist/components/radio-group/radio-group.d.ts.map +0 -1
  125. package/dist/components/radio-group/radio-group.js +0 -161
  126. package/dist/components/router/router.d.ts +0 -7
  127. package/dist/components/router/router.d.ts.map +0 -1
  128. package/dist/components/router/router.js +0 -37
  129. package/dist/components/select/select.d.ts +0 -16
  130. package/dist/components/select/select.d.ts.map +0 -1
  131. package/dist/components/select/select.js +0 -172
  132. package/dist/components/skeleton/skeleton.d.ts +0 -17
  133. package/dist/components/skeleton/skeleton.d.ts.map +0 -1
  134. package/dist/components/skeleton/skeleton.js +0 -78
  135. package/dist/components/switch/switch.d.ts +0 -25
  136. package/dist/components/switch/switch.d.ts.map +0 -1
  137. package/dist/components/switch/switch.js +0 -185
  138. package/dist/components/table/data-table.d.ts +0 -72
  139. package/dist/components/table/data-table.d.ts.map +0 -1
  140. package/dist/components/table/data-table.js +0 -551
  141. package/dist/components/table/table.d.ts +0 -22
  142. package/dist/components/table/table.d.ts.map +0 -1
  143. package/dist/components/table/table.js +0 -167
  144. package/dist/components/tabs/tab-panel.d.ts +0 -8
  145. package/dist/components/tabs/tab-panel.d.ts.map +0 -1
  146. package/dist/components/tabs/tab-panel.js +0 -46
  147. package/dist/components/tabs/tab.d.ts +0 -9
  148. package/dist/components/tabs/tab.d.ts.map +0 -1
  149. package/dist/components/tabs/tab.js +0 -91
  150. package/dist/components/tabs/tabs.d.ts +0 -14
  151. package/dist/components/tabs/tabs.d.ts.map +0 -1
  152. package/dist/components/tabs/tabs.js +0 -85
  153. package/dist/components/textarea/textarea.d.ts +0 -36
  154. package/dist/components/textarea/textarea.d.ts.map +0 -1
  155. package/dist/components/textarea/textarea.js +0 -231
  156. package/dist/components/theme-toggle/theme-toggle.d.ts +0 -15
  157. package/dist/components/theme-toggle/theme-toggle.d.ts.map +0 -1
  158. package/dist/components/theme-toggle/theme-toggle.js +0 -130
  159. package/dist/components/vertical-nav/vertical-nav-group.d.ts +0 -9
  160. package/dist/components/vertical-nav/vertical-nav-group.d.ts.map +0 -1
  161. package/dist/components/vertical-nav/vertical-nav-group.js +0 -111
  162. package/dist/components/vertical-nav/vertical-nav-item.d.ts +0 -8
  163. package/dist/components/vertical-nav/vertical-nav-item.d.ts.map +0 -1
  164. package/dist/components/vertical-nav/vertical-nav-item.js +0 -65
  165. package/dist/styles/index.css +0 -171
  166. package/dist/styles/reset.d.ts +0 -2
  167. package/dist/styles/reset.d.ts.map +0 -1
  168. package/dist/styles/reset.js +0 -50
@@ -1,54 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { LitElement, html, css } from 'lit';
8
- import { customElement } from 'lit/decorators.js';
9
- import { resetStyles } from '../../styles/reset.js';
10
- let StCard = class StCard extends LitElement {
11
- render() {
12
- return html `
13
- <slot name="header"></slot>
14
- <slot></slot>
15
- <slot name="footer"></slot>
16
- `;
17
- }
18
- };
19
- StCard.styles = [
20
- resetStyles,
21
- css `
22
- :host {
23
- display: flex;
24
- flex-direction: column;
25
- background-color: var(--st-color-bg);
26
- border: 1px solid var(--st-color-border);
27
- border-radius: 8px;
28
- overflow: hidden; /* Ensures contents don't break the border radius */
29
- }
30
-
31
- /* Apply standard padding to all direct slotted children */
32
- ::slotted(*) {
33
- padding: var(--st-spacing-md) var(--st-spacing-lg);
34
- }
35
-
36
- /* Optional structured slots for headers and footers */
37
- ::slotted([slot="header"]) {
38
- border-bottom: 1px solid var(--st-color-border);
39
- background-color: var(--st-color-surface);
40
- font-weight: var(--st-font-weight-medium);
41
- margin: 0;
42
- }
43
-
44
- ::slotted([slot="footer"]) {
45
- border-top: 1px solid var(--st-color-border);
46
- background-color: var(--st-color-surface);
47
- margin-top: auto; /* Pushes the footer to the bottom if the card has a fixed height */
48
- }
49
- `
50
- ];
51
- StCard = __decorate([
52
- customElement('st-card')
53
- ], StCard);
54
- export { StCard };
@@ -1,28 +0,0 @@
1
- import { LitElement, PropertyValues } from "lit";
2
- export declare class StCheckbox extends LitElement {
3
- static formAssociated: boolean;
4
- private _internals;
5
- private _inputEl;
6
- size: "sm" | "md" | "lg";
7
- name: string;
8
- value: string;
9
- checked: boolean;
10
- indeterminate: boolean;
11
- disabled: boolean;
12
- invalid: boolean;
13
- required: boolean;
14
- ariaLabel: string;
15
- constructor();
16
- static styles: import("lit").CSSResult[];
17
- updated(changedProperties: PropertyValues<this>): void;
18
- private _syncValidity;
19
- formResetCallback(): void;
20
- private _handleChange;
21
- render(): import("lit-html").TemplateResult<1>;
22
- }
23
- declare global {
24
- interface HTMLElementTagNameMap {
25
- "st-checkbox": StCheckbox;
26
- }
27
- }
28
- //# sourceMappingURL=checkbox.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IAEX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,SAAM;IAEzB,KAAK,SAAQ;IAEG,OAAO,UAAS;IAChB,aAAa,UAAS;IAEtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAEtB,SAAS,SAAM;IAEtD,cAaG;IAED,MAAM,CAAC,MAAM,4BAuHX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAYvD;IAED,OAAO,CAAC,aAAa;IASrB,iBAAiB,SAKhB;IAED,OAAO,CAAC,aAAa;IAcrB,MAAM,yCAyBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
@@ -1,247 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { LitElement, html, css } from "lit";
8
- import { customElement, property, query } from "lit/decorators.js";
9
- import { resetStyles } from "../../styles/reset.js";
10
- let StCheckbox = class StCheckbox extends LitElement {
11
- constructor() {
12
- super();
13
- this.size = "md";
14
- this.name = "";
15
- // Checkboxes default to 'on' natively if no value is provided
16
- this.value = "on";
17
- this.checked = false;
18
- this.indeterminate = false;
19
- this.disabled = false;
20
- this.invalid = false;
21
- this.required = false;
22
- this.ariaLabel = "";
23
- this._internals = this.attachInternals();
24
- // 1. Trigger error state if the user clicks away and the field is invalid
25
- this.addEventListener('focusout', () => {
26
- this.invalid = !this._inputEl.validity.valid;
27
- });
28
- // 2. Trigger error state if the st-form tries to submit and fails
29
- this.addEventListener('invalid', () => {
30
- this.invalid = true;
31
- });
32
- }
33
- updated(changedProperties) {
34
- super.updated(changedProperties);
35
- if (changedProperties.has("checked") || changedProperties.has("value")) {
36
- // Form API: If checked, submit the value. If unchecked, submit null to remove it from FormData.
37
- this._internals.setFormValue(this.checked ? this.value : null);
38
- this._syncValidity();
39
- }
40
- if (changedProperties.has("required")) {
41
- this._syncValidity();
42
- }
43
- }
44
- _syncValidity() {
45
- if (!this._inputEl)
46
- return;
47
- this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
48
- }
49
- formResetCallback() {
50
- this.checked = false;
51
- this.indeterminate = false;
52
- this._internals.setFormValue(null);
53
- this.updateComplete.then(() => this._syncValidity());
54
- }
55
- _handleChange(e) {
56
- e.stopPropagation();
57
- if (this.disabled)
58
- return;
59
- // Standard native behavior: clicking an indeterminate checkbox unsets the indeterminate state
60
- if (this.indeterminate) {
61
- this.indeterminate = false;
62
- }
63
- this.checked = this._inputEl.checked;
64
- this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
65
- }
66
- render() {
67
- return html `
68
- <label>
69
- <input
70
- type="checkbox"
71
- aria-label=${this.ariaLabel || ""}
72
- .name=${this.name}
73
- .value=${this.value}
74
- .checked=${this.checked}
75
- .indeterminate=${this.indeterminate}
76
- ?disabled=${this.disabled}
77
- ?required=${this.required}
78
- @change=${this._handleChange}
79
- />
80
- <div class="control">
81
- <!-- Render both SVGs and use CSS to conditionally reveal them based on host attributes -->
82
- ${this.indeterminate
83
- ? html `<svg class="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"></path></svg>`
84
- : html `<svg class="icon-check" viewBox="0 0 24 24">
85
- <path d="M20 6L9 17l-5-5"></path>
86
- </svg>`}
87
- </div>
88
- <span class="label"><slot></slot></span>
89
- </label>
90
- `;
91
- }
92
- };
93
- StCheckbox.formAssociated = true;
94
- StCheckbox.styles = [
95
- resetStyles,
96
- css `
97
- :host {
98
- display: inline-block;
99
- outline: none;
100
- user-select: none;
101
- --checkbox-size: 1.25rem;
102
- --checkbox-icon-size: 0.875rem;
103
- }
104
-
105
- :host([size="sm"]) {
106
- --checkbox-size: 1rem;
107
- --checkbox-icon-size: 0.75rem;
108
- }
109
- :host([size="lg"]) {
110
- --checkbox-size: 1.5rem;
111
- --checkbox-icon-size: 1rem;
112
- }
113
-
114
- label {
115
- display: inline-flex;
116
- align-items: flex-start;
117
- gap: var(--st-spacing-sm);
118
- cursor: pointer;
119
- color: var(--st-color-text);
120
- font-size: var(--st-font-size-base);
121
- }
122
-
123
- /* Visually hide the native input but keep it in the DOM for focus/screen readers */
124
- input {
125
- position: absolute;
126
- width: var(--checkbox-size);
127
- height: var(--checkbox-size);
128
- padding: 0;
129
- margin: -1px;
130
- overflow: hidden;
131
- clip: rect(0, 0, 0, 0);
132
- white-space: nowrap;
133
- border-width: 0;
134
- }
135
-
136
- /* Custom Checkbox Box */
137
- .control {
138
- display: flex;
139
- align-items: center;
140
- justify-content: center;
141
- width: var(--checkbox-size);
142
- height: var(--checkbox-size);
143
- border: 1px solid var(--st-color-border);
144
- border-radius: 4px;
145
- background-color: var(--st-color-bg);
146
- transition: all 0.2s ease;
147
- flex-shrink: 0;
148
- /* Aligns the box nicely with standard text line-height */
149
- margin-top: 0.125rem;
150
- }
151
-
152
- /* Hover State */
153
- label:hover .control {
154
- border-color: var(--st-color-primary-hover);
155
- }
156
-
157
- /* Focus State */
158
- input:focus-visible + .control {
159
- box-shadow:
160
- 0 0 0 2px var(--st-color-bg),
161
- 0 0 0 4px var(--st-color-primary);
162
- }
163
-
164
- /* Checked & Indeterminate States */
165
- :host([checked]) .control,
166
- :host([indeterminate]) .control {
167
- border-color: var(--st-color-primary);
168
- background-color: var(--st-color-primary);
169
- }
170
-
171
- /* SVG Icons */
172
- svg {
173
- width: var(--checkbox-icon-size);
174
- height: var(--checkbox-icon-size);
175
- stroke: var(--st-white);
176
- stroke-width: 3;
177
- stroke-linecap: round;
178
- stroke-linejoin: round;
179
- fill: none;
180
- opacity: 0;
181
- transform: scale(0.5);
182
- transition:
183
- transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
184
- opacity 0.2s ease;
185
- }
186
-
187
- /* Reveal Icons */
188
- :host([checked]) svg.icon-check,
189
- :host([indeterminate]) svg.icon-minus {
190
- opacity: 1;
191
- transform: scale(1);
192
- }
193
-
194
- /* Disabled State */
195
- :host([disabled]) {
196
- pointer-events: none;
197
- }
198
- :host([disabled]) label {
199
- opacity: 0.5;
200
- cursor: not-allowed;
201
- }
202
-
203
- /* Invalid State */
204
- :host([invalid]) .control {
205
- border-color: var(--st-color-error);
206
- }
207
- :host([invalid]) input:focus-visible + .control {
208
- box-shadow:
209
- 0 0 0 2px var(--st-color-bg),
210
- 0 0 0 4px var(--st-color-error);
211
- }
212
- `,
213
- ];
214
- __decorate([
215
- query("input")
216
- ], StCheckbox.prototype, "_inputEl", void 0);
217
- __decorate([
218
- property({ type: String, reflect: true })
219
- ], StCheckbox.prototype, "size", void 0);
220
- __decorate([
221
- property({ type: String, reflect: true })
222
- ], StCheckbox.prototype, "name", void 0);
223
- __decorate([
224
- property({ type: String })
225
- ], StCheckbox.prototype, "value", void 0);
226
- __decorate([
227
- property({ type: Boolean, reflect: true })
228
- ], StCheckbox.prototype, "checked", void 0);
229
- __decorate([
230
- property({ type: Boolean, reflect: true })
231
- ], StCheckbox.prototype, "indeterminate", void 0);
232
- __decorate([
233
- property({ type: Boolean, reflect: true })
234
- ], StCheckbox.prototype, "disabled", void 0);
235
- __decorate([
236
- property({ type: Boolean, reflect: true })
237
- ], StCheckbox.prototype, "invalid", void 0);
238
- __decorate([
239
- property({ type: Boolean, reflect: true })
240
- ], StCheckbox.prototype, "required", void 0);
241
- __decorate([
242
- property({ attribute: "aria-label" })
243
- ], StCheckbox.prototype, "ariaLabel", void 0);
244
- StCheckbox = __decorate([
245
- customElement("st-checkbox")
246
- ], StCheckbox);
247
- export { StCheckbox };
@@ -1,20 +0,0 @@
1
- import { LitElement } from 'lit';
2
- import 'prismjs/components/prism-typescript.js';
3
- import 'prismjs/components/prism-javascript.js';
4
- import 'prismjs/components/prism-css.js';
5
- import 'prismjs/components/prism-json.js';
6
- import 'prismjs/components/prism-bash.js';
7
- import 'prismjs/components/prism-csharp.js';
8
- export declare class StCodeBlock extends LitElement {
9
- language: string;
10
- private _snippets;
11
- private _activeIndex;
12
- private _copied;
13
- private _slot;
14
- static styles: import("lit").CSSResult[];
15
- private _handleSlotChange;
16
- private _dedent;
17
- private _copyToClipboard;
18
- render(): import("lit-html").TemplateResult<1>;
19
- }
20
- //# sourceMappingURL=code-block.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAChD,OAAO,iCAAiC,CAAC;AACzC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oCAAoC,CAAC;AAS5C,qBACa,WAAY,SAAQ,UAAU;IAEb,QAAQ,SAAgB;IAE3C,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,OAAO,CAAS;IAEN,OAAO,CAAC,KAAK,CAAmB;IAE3D,MAAM,CAAC,MAAM,4BAyHX;IAEF,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,OAAO;YAaD,gBAAgB;IAc9B,MAAM,yCAwCL;CACF"}
@@ -1,260 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { LitElement, html, css } from 'lit';
8
- import { customElement, property, state, query } from 'lit/decorators.js';
9
- import { unsafeHTML } from 'lit/directives/unsafe-html.js';
10
- import { resetStyles } from '../../styles/reset.js';
11
- import Prism from 'prismjs';
12
- import 'prismjs/components/prism-typescript.js';
13
- import 'prismjs/components/prism-javascript.js';
14
- import 'prismjs/components/prism-css.js';
15
- import 'prismjs/components/prism-json.js';
16
- import 'prismjs/components/prism-bash.js';
17
- import 'prismjs/components/prism-csharp.js';
18
- let StCodeBlock = class StCodeBlock extends LitElement {
19
- constructor() {
20
- super(...arguments);
21
- // Fallback language if a template doesn't provide one
22
- this.language = 'typescript';
23
- this._snippets = [];
24
- this._activeIndex = 0;
25
- this._copied = false;
26
- }
27
- _handleSlotChange() {
28
- const nodes = this._slot.assignedNodes({ flatten: true });
29
- // Find ALL template tags passed into the slot
30
- const templates = nodes.filter(n => n instanceof HTMLTemplateElement);
31
- if (templates.length > 0) {
32
- // Map over every template and parse its code and attributes
33
- this._snippets = templates.map(template => {
34
- const lang = template.getAttribute('data-lang') || this.language;
35
- const label = template.getAttribute('data-label') || lang; // Fallback to lang if no label provided
36
- const rawCode = this._dedent(template.innerHTML);
37
- const grammar = Prism.languages[lang] || Prism.languages.javascript;
38
- const highlightedCode = Prism.highlight(rawCode, grammar, lang);
39
- return { lang, label, rawCode, highlightedCode };
40
- });
41
- }
42
- else {
43
- // Fallback: If no template is used, process raw text just like before
44
- const rawText = nodes.map(n => n.textContent).join('');
45
- const rawCode = this._dedent(rawText);
46
- if (rawCode) {
47
- const grammar = Prism.languages[this.language] || Prism.languages.javascript;
48
- const highlightedCode = Prism.highlight(rawCode, grammar, this.language);
49
- this._snippets = [{ lang: this.language, label: this.language, rawCode, highlightedCode }];
50
- }
51
- }
52
- // Reset to the first tab whenever new code is injected
53
- this._activeIndex = 0;
54
- }
55
- _dedent(text) {
56
- const lines = text.split('\n');
57
- const minIndent = lines
58
- .filter(line => line.trim().length > 0)
59
- .reduce((min, line) => {
60
- const indent = line.match(/^\s*/)?.[0].length || 0;
61
- return Math.min(min, indent);
62
- }, Infinity);
63
- if (minIndent === Infinity || minIndent === 0)
64
- return text.trim();
65
- return lines.map(line => line.slice(minIndent)).join('\n').trim();
66
- }
67
- async _copyToClipboard() {
68
- // Copy the code from the currently active tab
69
- const activeSnippet = this._snippets[this._activeIndex];
70
- if (!activeSnippet)
71
- return;
72
- try {
73
- await navigator.clipboard.writeText(activeSnippet.rawCode);
74
- this._copied = true;
75
- setTimeout(() => { this._copied = false; }, 2000);
76
- }
77
- catch (err) {
78
- console.error('Failed to copy text: ', err);
79
- }
80
- }
81
- render() {
82
- const activeSnippet = this._snippets[this._activeIndex];
83
- return html `
84
- <div class="header">
85
- ${this._snippets.length > 1
86
- ? html `
87
- <div class="tabs">
88
- ${this._snippets.map((snippet, index) => html `
89
- <button
90
- class="tab ${index === this._activeIndex ? 'active' : ''}"
91
- @click=${() => this._activeIndex = index}
92
- >
93
- ${snippet.label}
94
- </button>
95
- `)}
96
- </div>
97
- `
98
- : html `
99
- <span class="language-label">${activeSnippet?.label || this.language}</span>
100
- `}
101
-
102
- <button class="copy-button ${this._copied ? 'copied' : ''}" @click=${this._copyToClipboard}>
103
- ${this._copied
104
- ? html `<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!`
105
- : html `<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy`}
106
- </button>
107
- </div>
108
-
109
- <!-- Render the currently active snippet -->
110
- ${activeSnippet ? html `
111
- <pre><code class="language-${activeSnippet.lang}">${unsafeHTML(activeSnippet.highlightedCode)}</code></pre>
112
- ` : ''}
113
-
114
- <div class="raw-content">
115
- <slot name="raw" @slotchange=${this._handleSlotChange}></slot>
116
- </div>
117
- `;
118
- }
119
- };
120
- StCodeBlock.styles = [
121
- resetStyles,
122
- css `
123
- :host {
124
- display: block;
125
- margin: var(--st-spacing-md) 0;
126
- border-radius: 8px;
127
- background-color: var(--st-color-surface);
128
- border: 1px solid var(--st-color-border);
129
- overflow: hidden;
130
- }
131
-
132
- .header {
133
- display: flex;
134
- justify-content: space-between;
135
- align-items: center;
136
- background-color: rgba(0, 0, 0, 0.2);
137
- border-bottom: 1px solid var(--st-color-border);
138
- padding: 0 var(--st-spacing-md);
139
- min-height: 2.5rem; /* 40px */
140
- }
141
-
142
- /* Single language label */
143
- .language-label {
144
- font-size: var(--st-font-size-xs);
145
- color: var(--st-color-text-muted);
146
- text-transform: uppercase;
147
- letter-spacing: 0.05em;
148
- font-weight: var(--st-font-weight-bold);
149
- }
150
-
151
- /* Multi-language Tabs */
152
- .tabs {
153
- display: flex;
154
- gap: var(--st-spacing-md);
155
- height: 100%;
156
- }
157
-
158
- .tab {
159
- background: transparent;
160
- border: none;
161
- border-bottom: 2px solid transparent;
162
- color: var(--st-color-text-muted);
163
- font-size: var(--st-font-size-xs);
164
- font-weight: var(--st-font-weight-medium);
165
- padding: var(--st-spacing-xs) 0;
166
- cursor: pointer;
167
- transition: all 0.2s ease;
168
- }
169
-
170
- .tab:hover {
171
- color: var(--st-color-text);
172
- }
173
-
174
- .tab.active {
175
- color: var(--st-color-primary);
176
- border-bottom-color: var(--st-color-primary);
177
- }
178
-
179
- /* Copy Button */
180
- .copy-button {
181
- background: transparent;
182
- border: 1px solid transparent;
183
- color: var(--st-color-text-muted);
184
- cursor: pointer;
185
- display: flex;
186
- align-items: center;
187
- gap: var(--st-spacing-xs);
188
- padding: 4px 8px;
189
- border-radius: 4px;
190
- font-size: var(--st-font-size-xs);
191
- transition: all 0.2s ease;
192
- margin-left: auto; /* Pushes it to the right */
193
- }
194
-
195
- .copy-button:hover {
196
- color: var(--st-color-text);
197
- background-color: rgba(255, 255, 255, 0.05);
198
- }
199
-
200
- .copy-button svg {
201
- width: 14px;
202
- height: 14px;
203
- fill: none;
204
- stroke: currentColor;
205
- stroke-width: 2;
206
- stroke-linecap: round;
207
- stroke-linejoin: round;
208
- }
209
-
210
- .copy-button.copied {
211
- color: var(--st-color-success);
212
- }
213
-
214
- pre {
215
- margin: 0;
216
- padding: var(--st-spacing-md);
217
- overflow-x: auto;
218
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
219
- font-size: 0.875rem;
220
- line-height: 1.5;
221
- color: var(--st-color-text);
222
- }
223
-
224
- .raw-content {
225
- display: none;
226
- }
227
-
228
- /* ==========================================================
229
- Prism.js Theme Mapping (Space Grey / Purple Aesthetic)
230
- ========================================================== */
231
- .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--st-color-text-muted); font-style: italic; }
232
- .token.punctuation { color: #8b949e; }
233
- .token.namespace { opacity: .7; }
234
- .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #79c0ff; }
235
- .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a5d6ff; }
236
- .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--st-color-text); }
237
- .token.atrule, .token.attr-value, .token.keyword { color: var(--st-color-primary); }
238
- .token.function, .token.class-name { color: #d2a8ff; }
239
- .token.regex, .token.important, .token.variable { color: #ffa657; }
240
- `
241
- ];
242
- __decorate([
243
- property({ type: String })
244
- ], StCodeBlock.prototype, "language", void 0);
245
- __decorate([
246
- state()
247
- ], StCodeBlock.prototype, "_snippets", void 0);
248
- __decorate([
249
- state()
250
- ], StCodeBlock.prototype, "_activeIndex", void 0);
251
- __decorate([
252
- state()
253
- ], StCodeBlock.prototype, "_copied", void 0);
254
- __decorate([
255
- query('slot[name="raw"]')
256
- ], StCodeBlock.prototype, "_slot", void 0);
257
- StCodeBlock = __decorate([
258
- customElement('st-code-block')
259
- ], StCodeBlock);
260
- export { StCodeBlock };
@@ -1,13 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class StContentCard extends LitElement {
3
- href?: string;
4
- target: '_blank' | '_self';
5
- static styles: import("lit").CSSResult[];
6
- render(): import("lit-html").TemplateResult<1>;
7
- }
8
- declare global {
9
- interface HTMLElementTagNameMap {
10
- 'st-content-card': StContentCard;
11
- }
12
- }
13
- //# sourceMappingURL=content-card.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"content-card.d.ts","sourceRoot":"","sources":["../../../src/components/content-card/content-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,aAAc,SAAQ,UAAU;IAEf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAW;IAEjE,MAAM,CAAC,MAAM,4BA8FX;IAEF,MAAM,yCAoBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}