@jaisocx/css-code-snippet 1.2.6 → 1.3.2

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 (97) hide show
  1. package/MediaAndStyles/{csstool-codesnippet-theme-styles-main.css → CssCodeSnippet_main.css} +19 -17
  2. package/MediaAndStyles/CssCodeSnippet_main_Webpack.css +31 -0
  3. package/MediaAndStyles/CssCodeSnippet_main_Webpack_minimal.css +33 -0
  4. package/MediaAndStyles/CssCodeSnippet_main_relative.css +30 -0
  5. package/MediaAndStyles/CssCodeSnippet_main_resolved.css +736 -0
  6. package/MediaAndStyles/CssCodeSnippet_main_resolved_minimal.css +251 -0
  7. package/MediaAndStyles/themes/color_themes/css_code_snippet__css_clean_start_2__color_theme.css +15 -0
  8. package/MediaAndStyles/themes/{csstool-codesnippet-theme-colour-blue.css → color_themes/csstool-codesnippet-theme-colour-blue.css} +4 -0
  9. package/MediaAndStyles/themes/{csstool-codesnippet-theme-colour-rosa.css → color_themes/csstool-codesnippet-theme-colour-rosa.css} +5 -1
  10. package/MediaAndStyles/themes/{csstool-codesnippet-theme-colour-salad.css → color_themes/csstool-codesnippet-theme-colour-salad.css} +7 -0
  11. package/MediaAndStyles/themes/{csstool-codesnippet-theme-base.css → theme_base/CssCodeSnippet_theme_base_main.css} +26 -4
  12. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_landscape__CssCodeSnippet__theme_base.css +10 -0
  13. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_d05_very_small_xxs_portrait__CssCodeSnippet__theme_base.css +10 -0
  14. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_landscape__CssCodeSnippet__theme_base.css +10 -0
  15. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e02_mobile_xs_portrait__CssCodeSnippet__theme_base.css +10 -0
  16. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_landscape__CssCodeSnippet__theme_base.css +10 -0
  17. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e04_mobile_s_portrait__CssCodeSnippet__theme_base.css +10 -0
  18. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_landscape__CssCodeSnippet__theme_base.css +10 -0
  19. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e06_mobile_sm_portrait__CssCodeSnippet__theme_base.css +10 -0
  20. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_landscape__CssCodeSnippet__theme_base.css +10 -0
  21. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_e08_mobile_md_portrait__CssCodeSnippet__theme_base.css +10 -0
  22. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h03_tablet_s_landscape__CssCodeSnippet__theme_base.css +10 -0
  23. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h03_tablet_s_portrait__CssCodeSnippet__theme_base.css +10 -0
  24. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_sm_landscape__CssCodeSnippet__theme_base.css +10 -0
  25. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h05_tablet_sm_portrait__CssCodeSnippet__theme_base.css +10 -0
  26. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h07_tablet_md_landscape__CssCodeSnippet__theme_base.css +10 -0
  27. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h07_tablet_md_portrait__CssCodeSnippet__theme_base.css +10 -0
  28. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h09_tablet_lg_landscape__CssCodeSnippet__theme_base.css +10 -0
  29. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_h09_tablet_lg_portrait__CssCodeSnippet__theme_base.css +10 -0
  30. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l02_laptop_sm_landscape__CssCodeSnippet__theme_base.css +10 -0
  31. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l02_laptop_sm_portrait__CssCodeSnippet__theme_base.css +10 -0
  32. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_md_landscape__CssCodeSnippet__theme_base.css +10 -0
  33. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l03_laptop_md_portrait__CssCodeSnippet__theme_base.css +10 -0
  34. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_landscape__CssCodeSnippet__theme_base.css +10 -0
  35. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_l07_laptop_lg_portrait__CssCodeSnippet__theme_base.css +10 -0
  36. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_landscape__CssCodeSnippet__theme_base.css +10 -0
  37. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s02_display_xl_portrait__CssCodeSnippet__theme_base.css +10 -0
  38. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_landscape__CssCodeSnippet__theme_base.css +10 -0
  39. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s04_display_xxl_portrait__CssCodeSnippet__theme_base.css +10 -0
  40. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_landscape__CssCodeSnippet__theme_base.css +10 -0
  41. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_s08_display_qhd_portrait__CssCodeSnippet__theme_base.css +10 -0
  42. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_landscape__CssCodeSnippet__theme_base.css +10 -0
  43. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t04_tv_4k_portrait__CssCodeSnippet__theme_base.css +10 -0
  44. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_landscape__CssCodeSnippet__theme_base.css +10 -0
  45. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t08_tv_8k_portrait__CssCodeSnippet__theme_base.css +10 -0
  46. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_landscape__CssCodeSnippet__theme_base.css +10 -0
  47. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t16_tv_16k_portrait__CssCodeSnippet__theme_base.css +10 -0
  48. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_landscape__CssCodeSnippet__theme_base.css +10 -0
  49. package/MediaAndStyles/themes/theme_base/responsive/responsive_size_t99_tv_xxxl_portrait__CssCodeSnippet__theme_base.css +10 -0
  50. package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCodeSnippet_theme_base_Relative.css +98 -0
  51. package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCodeSnippet_theme_base_Webpack.css +98 -0
  52. package/MediaAndStyles/themes/theme_base/responsive_size_Imports_CssCodeSnippet_theme_base_Webpack_minimal.css +98 -0
  53. package/README.md +3 -4
  54. package/css_code_snippet.example.html +418 -0
  55. package/index.example.html +417 -0
  56. package/package.json +33 -21
  57. package/transpiled/CommonJS/CssCodeSnippetHelpers.d.ts.map +1 -1
  58. package/transpiled/CommonJS/CssCodeSnippetHelpers.js.map +1 -1
  59. package/transpiled/CommonJS/index.d.ts +1 -1
  60. package/transpiled/CommonJS/index.d.ts.map +1 -1
  61. package/transpiled/CommonJS/index.js +1 -3
  62. package/transpiled/CommonJS/index.js.map +1 -1
  63. package/transpiled/CommonJS/webpack.aliases.cjs +19 -0
  64. package/transpiled/CommonJS/webpack.aliases.cjs.map +1 -0
  65. package/transpiled/CommonJS/webpack.aliases.d.cts +6 -0
  66. package/transpiled/CommonJS/webpack.aliases.d.cts.map +1 -0
  67. package/transpiled/CommonJS/webpack.aliases.d.mts +6 -0
  68. package/transpiled/CommonJS/webpack.aliases.d.mts.map +1 -0
  69. package/transpiled/CommonJS/webpack.aliases.mjs +15 -0
  70. package/transpiled/CommonJS/webpack.aliases.mjs.map +1 -0
  71. package/transpiled/CommonJS/webpackAliases.d.ts +2 -0
  72. package/transpiled/CommonJS/webpackAliases.d.ts.map +1 -0
  73. package/transpiled/CommonJS/webpackAliases.js +64 -0
  74. package/transpiled/CommonJS/webpackAliases.js.map +1 -0
  75. package/transpiled/ESNext/CssCodeSnippetHelpers.d.ts.map +1 -1
  76. package/transpiled/ESNext/CssCodeSnippetHelpers.js.map +1 -1
  77. package/transpiled/ESNext/index.d.ts +1 -1
  78. package/transpiled/ESNext/index.d.ts.map +1 -1
  79. package/transpiled/ESNext/index.js +1 -1
  80. package/transpiled/ESNext/index.js.map +1 -1
  81. package/transpiled/ESNext/webpack.aliases.cjs +19 -0
  82. package/transpiled/ESNext/webpack.aliases.cjs.map +1 -0
  83. package/transpiled/ESNext/webpack.aliases.d.cts +6 -0
  84. package/transpiled/ESNext/webpack.aliases.d.cts.map +1 -0
  85. package/transpiled/ESNext/webpack.aliases.d.mts +6 -0
  86. package/transpiled/ESNext/webpack.aliases.d.mts.map +1 -0
  87. package/transpiled/ESNext/webpack.aliases.mjs +14 -0
  88. package/transpiled/ESNext/webpack.aliases.mjs.map +1 -0
  89. package/transpiled/ESNext/webpackAliases.d.ts +2 -0
  90. package/transpiled/ESNext/webpackAliases.d.ts.map +1 -0
  91. package/transpiled/ESNext/webpackAliases.js +28 -0
  92. package/transpiled/ESNext/webpackAliases.js.map +1 -0
  93. package/transpiled/Simple/CssCodeSnippetHelpers.js +47 -42
  94. package/webpack.aliases.json +5 -0
  95. package/ExampleCss_CssCodeSnippet.html +0 -213
  96. /package/MediaAndStyles/themes/{csstool-codesnippet-theme-size-large.css → layout_themes/csstool-codesnippet-theme-size-large.css} +0 -0
  97. /package/MediaAndStyles/themes/{csstool-codesnippet-theme-size-little.css → layout_themes/csstool-codesnippet-theme-size-little.css} +0 -0
@@ -0,0 +1,417 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="jsx theme_visible_height">
3
+ <head>
4
+
5
+ <title>CssCodeSnippet</title>
6
+
7
+ <base href="./">
8
+
9
+ <meta charset="utf-8" />
10
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
11
+
12
+
13
+
14
+ <!--# FAVICON -->
15
+ <!-- <link
16
+ rel="icon"
17
+ type="image/x-icon"
18
+ href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
19
+ href-fallback="favicon/Icon_Jaisocx.ico"
20
+ onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
21
+ /> -->
22
+
23
+ <link
24
+ rel="icon"
25
+ type="image/x-icon"
26
+ href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
27
+ href-fallback="favicon/Icon_Sandbox_Brightday.ico"
28
+ onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
29
+ />
30
+
31
+
32
+
33
+ <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
34
+ <link
35
+ fetchpriority="high"
36
+ rel="preload"
37
+ as="font"
38
+ type="font/ttf"
39
+ href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
40
+ />
41
+
42
+ <link
43
+ fetchpriority="high"
44
+ rel="preload"
45
+ as="font"
46
+ type="font/ttf"
47
+ href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
48
+ />
49
+
50
+ <!--# CSS FOR FONTS -->
51
+ <link
52
+ rel="stylesheet"
53
+ type="text/css"
54
+ href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
55
+ />
56
+
57
+
58
+
59
+ <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
60
+
61
+ <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
62
+ <!-- <link
63
+ rel="stylesheet"
64
+ type="text/css"
65
+ charset="utf-8"
66
+ href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
67
+ href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
68
+ onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
69
+ /> -->
70
+
71
+ <!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL -->
72
+ <link
73
+ rel="stylesheet"
74
+ type="text/css"
75
+ charset="utf-8"
76
+ href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
77
+ href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
78
+ onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
79
+ />
80
+
81
+
82
+
83
+
84
+
85
+ <!--# STYLES CssCodeSnippet and theme_base -->
86
+ <link
87
+ rel="stylesheet"
88
+ type="text/css"
89
+ charset="utf-8"
90
+ href="MediaAndStyles/CssCodeSnippet_main_relative.css"
91
+ />
92
+
93
+
94
+
95
+ <!-- <style>
96
+ /* .jsx {
97
+
98
+ }
99
+
100
+ .jsx .CssCodeSnippet {
101
+
102
+ } */
103
+
104
+ </style> -->
105
+
106
+
107
+
108
+ <style>
109
+
110
+ .jsx {
111
+ --jsx--css-clean-start-2--site--padding: 2rem 0 0 0;
112
+
113
+ --jsx--css-clean-start-2--h1--font-size: 1.05rem;
114
+ --jsx--css-clean-start-2--h2--font-size: 0.9rem;
115
+ --jsx--css-clean-start-2--h3--font-size: 0.83rem;
116
+
117
+ --jsx--css-clean-start-2--h2--font-weight: 500;
118
+
119
+ --theme-button-width: fit-content;
120
+ }
121
+
122
+ .jsx themebuttons {
123
+ width: fit-content;
124
+ display: grid;
125
+ grid-auto-flow: column;
126
+ column-gap: 3rem;
127
+ margin: 0.9rem 0px 1.6rem 0px;
128
+ }
129
+
130
+ .jsx themebuttons button {
131
+ width: var(--theme-button-width);
132
+ }
133
+
134
+ .current::after {
135
+ content: "";
136
+ position: absolute;
137
+ bottom: -0.3rem;
138
+ left: 0;
139
+ width: 100%;
140
+ height: 0;
141
+ max-height: 0;
142
+ overflow-y: hidden;
143
+ border-bottom-width: 0.14rem;
144
+ border-bottom-style: solid;
145
+ border-bottom-color: var(--clean-start__text-color);
146
+ }
147
+
148
+ .jsx button {
149
+ background-color: transparent;
150
+ text-align: left;
151
+ }
152
+
153
+ #tooltip-button {
154
+ font-family: fantasy;
155
+ }
156
+
157
+
158
+
159
+ .jsx.theme_visible_height body > main > content {
160
+ padding: 0 1rem 0 1rem;
161
+
162
+ overflow-y: hidden;
163
+
164
+ min-height: unset;
165
+ height: unset;
166
+
167
+ flex-grow: 1;
168
+ flex-shrink: 1;
169
+
170
+ display: flex;
171
+ flex-direction: column;
172
+ flex-basis: auto;
173
+ justify-content: stretch;
174
+ align-items: stretch;
175
+ }
176
+
177
+ .jsx.theme_visible_height > body > main > content > * {
178
+ flex-grow: 0;
179
+ flex-shrink: 1;
180
+ }
181
+
182
+ .jsx.theme_visible_height .CodeSnippetHolder {
183
+ --code-snippet-tool--overflow-y: auto;
184
+ --code-snippet-tool--height: unset;
185
+
186
+ min-height: 0;
187
+ max-height: unset;
188
+ height: unset;
189
+
190
+ flex-grow: 1;
191
+ flex-shrink: 1;
192
+ }
193
+
194
+ .jsx.theme_visible_height > body > main > page_signed {
195
+ flex-shrink: 1;
196
+
197
+ display: flex;
198
+ flex-direction: row;
199
+ justify-content: flex-start;
200
+ align-items: center;
201
+
202
+ padding: 2rem 0 0 0;
203
+
204
+ height: 6rem;
205
+ min-height: 6rem;
206
+ max-height: 6rem;
207
+ width: 100%;
208
+ }
209
+
210
+ .jsx.theme_visible_height > body > main > page_signed text {
211
+ display: flex;
212
+ flex-direction: row;
213
+ justify-content: flex-start;
214
+ align-items: center;
215
+
216
+ height: 100%;
217
+ min-height: 100%;
218
+ max-height: 100%;
219
+
220
+ width: 100%;
221
+
222
+ padding: 0 1rem 0 1rem;
223
+
224
+ color: whitesmoke;
225
+ background-color: green;
226
+ }
227
+
228
+ </style>
229
+
230
+
231
+
232
+ <style>
233
+
234
+ .jsx .CodeSnippetHolder#code-snippet-example,
235
+ .jsx .CodeSnippetHolder#code-snippet-example-thin {
236
+ /* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
237
+ on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
238
+ --lines-numbers--content: var(--lines-numbers--content--99);
239
+
240
+ --lines-number: 29;
241
+ }
242
+
243
+ .jsx .CodeSnippetHolder#code-snippet-example {
244
+ --code-snippet-tool--width: max-content;
245
+ }
246
+
247
+ .jsx .CodeSnippetHolder#code-snippet-example-thin {
248
+ --code-snippet-tool--width: 28rem;
249
+ --code-snippet-tool--height: 22rem;
250
+ --overflow-y: auto;
251
+ }
252
+
253
+ </style>
254
+
255
+ </head>
256
+
257
+ <body>
258
+
259
+ <main>
260
+
261
+ <content>
262
+
263
+ <h1>Css Code Snippet</h1>
264
+ <h2>@jaisocx/css-code-snippet</h2>
265
+ <h3>css_code_snippet.example.html</h3>
266
+ <description>Css sites tool rendering code blocks with numbered code rows</description>
267
+
268
+
269
+
270
+ <ThemeButtons>
271
+ <button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
272
+ <button id="button-turn-on-daymode" data-theme="theme_lightmode">Day Mode</button>
273
+ <button id="button-turn-on-nightmode" data-theme="theme_darkmode">Night Mode</button>
274
+ </ThemeButtons>
275
+
276
+
277
+
278
+ <CodeSnippetHolder id="code-snippet-example" class="CodeSnippetHolder css_clean_start_2__color_theme little">
279
+ <pre class="CodeSnippetArea">
280
+ import { TestBed } from '@angular/core/testing';
281
+ import { AppComponent } from './app.component';
282
+
283
+ describe('AppComponent', () => {
284
+ beforeEach(async () => {
285
+ await TestBed.configureTestingModule({
286
+ imports: [AppComponent],
287
+ }).compileComponents();
288
+ });
289
+
290
+ it('should create the app', () => {
291
+ const fixture = TestBed.createComponent(AppComponent);
292
+ const app = fixture.componentInstance;
293
+ expect(app).toBeTruthy();
294
+ });
295
+
296
+ it(`should have the 'angular' title`, () => {
297
+ const fixture = TestBed.createComponent(AppComponent);
298
+ const app = fixture.componentInstance;
299
+ expect(app.title).toEqual('angular');
300
+ });
301
+
302
+ it('should render title', () => {
303
+ const fixture = TestBed.createComponent(AppComponent);
304
+ fixture.detectChanges();
305
+ const compiled = fixture.nativeElement as HTMLElement;
306
+ expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular');
307
+ });
308
+ });
309
+ </pre>
310
+ </CodeSnippetHolder>
311
+
312
+
313
+ </content>
314
+
315
+
316
+
317
+ <page_signed>
318
+ <text>CSS Code Snippet 1.2.7 2025</text>
319
+ </page_signed>
320
+
321
+ </main>
322
+
323
+ </body>
324
+
325
+
326
+
327
+ <script
328
+ async="true"
329
+ defer="true"
330
+ charset="utf-8"
331
+ type="text/javascript"
332
+ >
333
+
334
+ let currentButtonNodeClicked = null;
335
+
336
+ let cssClassesNames = [
337
+ "jsx",
338
+ "theme_visible_height"
339
+ ];
340
+
341
+
342
+
343
+ // declaring the function, this is used in the event handler of the theme turning button when clicked on this button.
344
+ function turnOnTheme ( buttonNodeClicked ) {
345
+
346
+ if ( currentButtonNodeClicked !== null ) {
347
+ currentButtonNodeClicked.classList.remove( "current" );
348
+ }
349
+
350
+ const htmlNode = document.getElementsByTagName("html")[0];
351
+ const htmlNodeClassList = htmlNode.classList;
352
+
353
+ const themeCssClassPrefix = "theme";
354
+
355
+ htmlNodeClassList.forEach (
356
+ (cssClassName) => {
357
+ if ( cssClassesNames.includes( cssClassName ) ) {
358
+ return;
359
+ }
360
+
361
+ if ( cssClassName.startsWith( themeCssClassPrefix ) === true ) {
362
+ htmlNodeClassList.remove( cssClassName );
363
+ }
364
+ }
365
+ );
366
+
367
+ const themeName = buttonNodeClicked.dataset.theme;
368
+ if ( themeName && ( themeName.length !== 0 ) ) {
369
+ htmlNode.classList.add( themeName );
370
+ }
371
+
372
+ currentButtonNodeClicked = buttonNodeClicked;
373
+ currentButtonNodeClicked.classList.add( "current" );
374
+
375
+ }
376
+
377
+ // declaring the function, this adds to buttons the event handler to turn on the theme.
378
+ // this function is invoked when the site loads in the browser,
379
+ // in the event handler for the event DOMContentLoaded
380
+ function addThemeButtonsEventHandlers() {
381
+
382
+ const buttonsIDs = [
383
+ "button-turn-on-base-theme",
384
+ "button-turn-on-daymode",
385
+ "button-turn-on-nightmode"
386
+ ];
387
+
388
+ for ( let buttonId of buttonsIDs ) {
389
+
390
+ let buttonNode = document.getElementById( buttonId );
391
+
392
+ buttonNode.addEventListener (
393
+ "click",
394
+ (evt) => {
395
+ let buttonNodeClicked = evt.target;
396
+ turnOnTheme ( buttonNodeClicked );
397
+ }
398
+ );
399
+
400
+ }
401
+ }
402
+
403
+
404
+
405
+ // DOCUMENT ONLOAD, INVOKES THE FUNCTION TO PRELOAD THEME FONTS
406
+ document.addEventListener('DOMContentLoaded', () => {
407
+
408
+ // adding to buttons the event handler to turn on the theme.
409
+ addThemeButtonsEventHandlers();
410
+
411
+ });
412
+
413
+ </script>
414
+
415
+ </html>
416
+
417
+
package/package.json CHANGED
@@ -1,35 +1,47 @@
1
1
  {
2
2
  "name": "@jaisocx/css-code-snippet",
3
- "version": "1.2.6",
4
- "private": false,
5
- "description": "",
6
- "type": "module",
7
- "main": "./transpiled/CommonJS/index.js",
8
- "types": "./transpiled/ESNext/index.d.ts",
9
- "module": "./transpiled/ESNext/index.js",
10
- "exports": {
11
- "require": "./transpiled/CommonJS/index.js",
12
- "import": "./transpiled/ESNext/index.js"
13
- },
3
+ "version": "1.3.2",
4
+ "description": "Css sites tool rendering code blocks with numbered code rows",
5
+ "author": "Jaisocx Company",
6
+ "keywords": [
7
+ "css",
8
+ "styles"
9
+ ],
14
10
  "files": [
11
+ "index.example.html",
12
+ "css_code_snippet.example.html",
13
+
14
+ "MediaAndStyles",
15
+
15
16
  "transpiled/CommonJS",
16
17
  "transpiled/ESNext",
17
18
  "transpiled/Simple",
18
- "MediaAndStyles/",
19
- "ExampleCss_CssCodeSnippet.html",
19
+
20
+ "webpack.aliases.json",
21
+
20
22
  "README.md"
21
23
  ],
22
- "keywords": [
23
- "css",
24
- "styles",
25
- "ui",
26
- "code snippet"
27
- ],
24
+ "private": false,
28
25
  "publishConfig": {
29
26
  "access": "public"
30
27
  },
31
- "author": "Jaisocx",
32
- "license": "ISC"
28
+ "type": "module",
29
+ "main": "./transpiled/CommonJS/index.js",
30
+ "types": "./transpiled/ESNext/index.d.ts",
31
+ "module": "./transpiled/ESNext/index.js",
32
+ "exports": {
33
+ ".": {
34
+ "import": "./transpiled/ESNext/index.js",
35
+ "require": "./transpiled/CommonJS/index.js"
36
+ },
37
+ "./WebpackAliases": {
38
+ "import": "./transpiled/ESNext/webpack.aliases.mjs",
39
+ "require": "./transpiled/CommonJS/webpack.aliases.cjs"
40
+ }
41
+ },
42
+ "dependencies": {
43
+ "@jaisocx/css-clean-start-2": "~1.1.5"
44
+ }
33
45
  }
34
46
 
35
47
 
@@ -1 +1 @@
1
- {"version":3,"file":"CssCodeSnippetHelpers.d.ts","sourceRoot":"","sources":["../../src/CssCodeSnippetHelpers.ts"],"names":[],"mappings":"AAAA,qBAAa,qBAAqB;WAElB,yBAAyB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS;WAOzD,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,GAAG;CAsC9D"}
1
+ {"version":3,"file":"CssCodeSnippetHelpers.d.ts","sourceRoot":"","sources":["../../src/CssCodeSnippetHelpers.ts"],"names":[],"mappings":"AAAA,qBAAa,qBAAqB;WAElB,yBAAyB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS;WASzD,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,GAAG;CA2C9D"}
@@ -1 +1 @@
1
- {"version":3,"file":"CssCodeSnippetHelpers.js","sourceRoot":"","sources":["../../src/CssCodeSnippetHelpers.ts"],"names":[],"mappings":";;;AAAA,MAAa,qBAAqB;IAEzB,MAAM,CAAC,yBAAyB,CAAC,WAAmB;QACzD,OAAO,CAAC,GAAG,CACT,0BAA0B,WAAW,uDAAuD,EAC5F,EAAE,cAAc,EAAE,qBAAqB,CAAC,qBAAqB,CAAE,WAAW,CAAE,EAAE,CAC/E,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,qBAAqB,CAAC,WAAmB;QACrD,MAAM,eAAe,GAAQ;YAC3B,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;SACd,CAAC;QAEF,MAAM,iBAAiB,GAAW,OAAO,CAAC;QAE1C,IAAI,QAAQ,GAAW,EAAE,CAAC;QAC1B,MAAM,OAAO,GAAa,EAAE,CAAC;QAC7B,KAAK,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,EAAE,EAAG,CAAC;YACrC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;QACD,QAAQ,GAAG,OAAO;aACf,MAAM,CACL,CAAC,YAAY,EAAE,YAAY,EAAE,EAAE;YAC7B,IAAI,gBAAgB,GAAW,EAAE,GAAG,YAAY,CAAC;YACjD,IAAI,uBAAuB,GAAW,EAAE,CAAC;YACzC,KAAK,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC/C,uBAAuB,IAAI,eAAe,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;YAClE,CAAC;YACD,YAAY,IAAI,uBAAuB,GAAG,iBAAiB,CAAC;YAC5D,OAAO,YAAY,CAAC;QACtB,CAAC,EACD,EAAE,CACH,CAAC;QAEJ,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC;CAEF;AA/CD,sDA+CC"}
1
+ {"version":3,"file":"CssCodeSnippetHelpers.js","sourceRoot":"","sources":["../../src/CssCodeSnippetHelpers.ts"],"names":[],"mappings":";;;AAAA,MAAa,qBAAqB;IAEzB,MAAM,CAAC,yBAAyB,CAAC,WAAmB;QACzD,OAAO,CAAC,GAAG,CACT,0BAA0B,WAAW,uDAAuD,EAC5F,EAAE,cAAc,EAAE,qBAAqB,CAAC,qBAAqB,CAAE,WAAW,CAAE,EAAE,CAC/E,CAAC;IACJ,CAAC;IAIM,MAAM,CAAC,qBAAqB,CAAC,WAAmB;QACrD,MAAM,eAAe,GAAQ;YAC3B,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;YACb,GAAG,EAAE,QAAQ;SACd,CAAC;QAEF,MAAM,iBAAiB,GAAW,OAAO,CAAC;QAE1C,IAAI,QAAQ,GAAW,EAAE,CAAC;QAC1B,MAAM,OAAO,GAAa,EAAE,CAAC;QAE7B,KAAK,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,EAAE,EAAG,CAAC;YACrC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;QACD,QAAQ,GAAG,OAAO;aACf,MAAM,CACL,CAAC,YAAY,EAAE,YAAY,EAAE,EAAE;YAC7B,IAAI,gBAAgB,GAAW,EAAE,GAAG,YAAY,CAAC;YACjD,IAAI,uBAAuB,GAAW,EAAE,CAAC;YAEzC,KAAK,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC/C,uBAAuB,IAAI,eAAe,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;YAClE,CAAC;YACD,YAAY,IAAI,uBAAuB,GAAG,iBAAiB,CAAC;YAG5D,OAAO,YAAY,CAAC;QACtB,CAAC,EACD,EAAE,CACH,CAAC;QAGJ,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC;CAEF;AAtDD,sDAsDC"}
@@ -1,2 +1,2 @@
1
- export { CssCodeSnippetHelpers } from "./CssCodeSnippetHelpers.js";
1
+ import "@CssCodeSnippet_MediaAndStyles/CssCodeSnippet_main_Webpack.css";
2
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gEAAgE,CAAC"}
@@ -1,6 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.CssCodeSnippetHelpers = void 0;
4
- var CssCodeSnippetHelpers_js_1 = require("./CssCodeSnippetHelpers.js");
5
- Object.defineProperty(exports, "CssCodeSnippetHelpers", { enumerable: true, get: function () { return CssCodeSnippetHelpers_js_1.CssCodeSnippetHelpers; } });
3
+ require("@CssCodeSnippet_MediaAndStyles/CssCodeSnippet_main_Webpack.css");
6
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uEAAmE;AAA1D,iIAAA,qBAAqB,OAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAAA,0EAAwE"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ // the hardcoded copy of .cjs file
3
+ const fs = require("node:fs");
4
+ const path = require("node:path");
5
+ const getWebpackAliases = require("./webpackAliases.js");
6
+ // Get the filename and directory in a CommonJS-compatible way
7
+ const fileName = __filename;
8
+ const currentDir = path.resolve(__dirname);
9
+ const projectRoot = path.resolve(currentDir, "../../../");
10
+ let webpackAliasesResolved = getWebpackAliases(projectRoot);
11
+ // Exporting the WebpackAliases object
12
+ module.exports = {
13
+ WebpackAliases: {
14
+ resolve: {
15
+ alias: Object.assign({}, webpackAliasesResolved),
16
+ },
17
+ },
18
+ };
19
+ //# sourceMappingURL=webpack.aliases.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"webpack.aliases.cjs","sourceRoot":"","sources":["../../src/webpack.aliases.cjs"],"names":[],"mappings":";AAAA,kCAAkC;AAElC,MAAM,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAClC,MAAM,iBAAiB,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAIzD,8DAA8D;AAC9D,MAAM,QAAQ,GAAG,UAAU,CAAC;AAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;AAI1D,IAAI,sBAAsB,GAAG,iBAAiB,CAAE,WAAW,CAAE,CAAC;AAE9D,sCAAsC;AACtC,MAAM,CAAC,OAAO,GAAG;IACf,cAAc,EAAE;QACd,OAAO,EAAE;YACP,KAAK,oBAAO,sBAAsB,CAAE;SACrC;KACF;CACF,CAAC"}
@@ -0,0 +1,6 @@
1
+ export namespace WebpackAliases {
2
+ namespace resolve {
3
+ let alias: any;
4
+ }
5
+ }
6
+ //# sourceMappingURL=webpack.aliases.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"webpack.aliases.d.cts","sourceRoot":"","sources":["../../src/webpack.aliases.cjs"],"names":[],"mappings":""}
@@ -0,0 +1,6 @@
1
+ export namespace WebpackAliases {
2
+ namespace resolve {
3
+ let alias: any;
4
+ }
5
+ }
6
+ //# sourceMappingURL=webpack.aliases.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"webpack.aliases.d.mts","sourceRoot":"","sources":["../../src/webpack.aliases.mjs"],"names":[],"mappings":""}
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ // the hardcoded copy of .mjs file
3
+ import * as path from "node:path";
4
+ import { fileURLToPath } from "node:url";
5
+ import { getWebpackAliases } from "./webpackAliases.js";
6
+ let fileName = fileURLToPath(import.meta.url);
7
+ let currentDir = path.resolve(fileName);
8
+ let projectRoot = path.resolve(currentDir, "../../../");
9
+ let webpackAliasesResolved = getWebpackAliases(projectRoot);
10
+ export let WebpackAliases = {
11
+ resolve: {
12
+ alias: Object.assign({}, webpackAliasesResolved),
13
+ },
14
+ };
15
+ //# sourceMappingURL=webpack.aliases.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"webpack.aliases.mjs","sourceRoot":"","sources":["../../src/webpack.aliases.mjs"],"names":[],"mappings":";AAAA,kCAAkC;AAElC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,IAAI,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9C,IAAI,UAAU,GAAG,IAAI,CAAC,OAAO,CAAE,QAAQ,CAAE,CAAC;AAC1C,IAAI,WAAW,GAAG,IAAI,CAAC,OAAO,CAAE,UAAU,EAAE,WAAW,CAAE,CAAC;AAG1D,IAAI,sBAAsB,GAAG,iBAAiB,CAAE,WAAW,CAAE,CAAC;AAG9D,MAAM,CAAC,IAAI,cAAc,GAAG;IAC1B,OAAO,EAAE;QACP,KAAK,oBAAO,sBAAsB,CAAE;KACrC;CACF,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare function getWebpackAliases(packageRoot: any): any;
2
+ //# sourceMappingURL=webpackAliases.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"webpackAliases.d.ts","sourceRoot":"","sources":["../../src/webpackAliases.ts"],"names":[],"mappings":"AAMA,wBAAgB,iBAAiB,CAAE,WAAW,EAAE,GAAG,GAAI,GAAG,CAiDzD"}
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+ // the hardcoded copy of .ts file
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ var desc = Object.getOwnPropertyDescriptor(m, k);
6
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
+ desc = { enumerable: true, get: function() { return m[k]; } };
8
+ }
9
+ Object.defineProperty(o, k2, desc);
10
+ }) : (function(o, m, k, k2) {
11
+ if (k2 === undefined) k2 = k;
12
+ o[k2] = m[k];
13
+ }));
14
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
16
+ }) : function(o, v) {
17
+ o["default"] = v;
18
+ });
19
+ var __importStar = (this && this.__importStar) || (function () {
20
+ var ownKeys = function(o) {
21
+ ownKeys = Object.getOwnPropertyNames || function (o) {
22
+ var ar = [];
23
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
24
+ return ar;
25
+ };
26
+ return ownKeys(o);
27
+ };
28
+ return function (mod) {
29
+ if (mod && mod.__esModule) return mod;
30
+ var result = {};
31
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
32
+ __setModuleDefault(result, mod);
33
+ return result;
34
+ };
35
+ })();
36
+ Object.defineProperty(exports, "__esModule", { value: true });
37
+ exports.getWebpackAliases = getWebpackAliases;
38
+ const path = __importStar(require("node:path"));
39
+ const fs = __importStar(require("node:fs"));
40
+ function getWebpackAliases(packageRoot) {
41
+ const PROJECT_ROOT_PLACEHOLDER = "${packageRoot}/";
42
+ const WEBPACK_ALIASES_JSON__FILENAME = "webpack.aliases.json";
43
+ const WEBPACK_ALIASES_JSON__CHARSET = "utf8";
44
+ const CHAR_ZERO_LEN = "";
45
+ const webpackAliasesJsonPath = path.resolve(packageRoot, WEBPACK_ALIASES_JSON__FILENAME);
46
+ // Read and parse the JSON file
47
+ const json = fs.readFileSync(webpackAliasesJsonPath, WEBPACK_ALIASES_JSON__CHARSET);
48
+ const aliases = JSON.parse(json);
49
+ console.info(aliases);
50
+ const webpackAliasesResolved = {};
51
+ for (const propName in aliases) {
52
+ const aliasPath = aliases[propName];
53
+ const pathReplaced = aliasPath.replace(PROJECT_ROOT_PLACEHOLDER, CHAR_ZERO_LEN);
54
+ const pathResolved = path.resolve(packageRoot, pathReplaced);
55
+ webpackAliasesResolved[propName] = pathResolved;
56
+ }
57
+ // let webpackAliases = {
58
+ // resolve: {
59
+ // alias: { ...webpackAliasesResolved },
60
+ // },
61
+ // };
62
+ return webpackAliasesResolved;
63
+ }
64
+ //# sourceMappingURL=webpackAliases.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"webpackAliases.js","sourceRoot":"","sources":["../../src/webpackAliases.ts"],"names":[],"mappings":";AAAA,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMjC,8CAiDC;AArDD,gDAAkC;AAClC,4CAA8B;AAG9B,SAAgB,iBAAiB,CAAE,WAAgB;IACjD,MAAM,wBAAwB,GAAQ,iBAAiB,CAAC;IACxD,MAAM,8BAA8B,GAAQ,sBAAsB,CAAC;IACnE,MAAM,6BAA6B,GAAQ,MAAM,CAAC;IAClD,MAAM,aAAa,GAAQ,EAAE,CAAC;IAE9B,MAAM,sBAAsB,GAAQ,IAAI,CAAC,OAAO,CAC9C,WAAW,EACX,8BAA8B,CAC/B,CAAC;IAGF,+BAA+B;IAC/B,MAAM,IAAI,GAAQ,EAAE,CAAC,YAAY,CAC/B,sBAAsB,EACtB,6BAA6B,CAC9B,CAAC;IAEF,MAAM,OAAO,GAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEtB,MAAM,sBAAsB,GAAQ,EAAE,CAAC;IAEvC,KAAK,MAAM,QAAQ,IAAI,OAAO,EAAE,CAAC;QAC/B,MAAM,SAAS,GAAQ,OAAO,CAAC,QAAQ,CAAC,CAAC;QAEzC,MAAM,YAAY,GAAQ,SAAS,CAAC,OAAO,CACzC,wBAAwB,EACxB,aAAa,CACd,CAAC;QAEF,MAAM,YAAY,GAAQ,IAAI,CAAC,OAAO,CACpC,WAAW,EACX,YAAY,CACb,CAAC;QAEF,sBAAsB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;IAElD,CAAC;IAGD,yBAAyB;IACzB,eAAe;IACf,4CAA4C;IAC5C,OAAO;IACP,KAAK;IACL,OAAO,sBAAsB,CAAC;AAEhC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"CssCodeSnippetHelpers.d.ts","sourceRoot":"","sources":["../../src/CssCodeSnippetHelpers.ts"],"names":[],"mappings":"AAAA,qBAAa,qBAAqB;WAElB,yBAAyB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS;WAOzD,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,GAAG;CAsC9D"}
1
+ {"version":3,"file":"CssCodeSnippetHelpers.d.ts","sourceRoot":"","sources":["../../src/CssCodeSnippetHelpers.ts"],"names":[],"mappings":"AAAA,qBAAa,qBAAqB;WAElB,yBAAyB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS;WASzD,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,GAAG;CA2C9D"}