@scouterna/ui-webc 0.2.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 (93) hide show
  1. package/LICENSE +21 -0
  2. package/dist/cjs/index-M8pbc2b8.js +1515 -0
  3. package/dist/cjs/index-M8pbc2b8.js.map +1 -0
  4. package/dist/cjs/index.cjs.js +8 -0
  5. package/dist/cjs/index.cjs.js.map +1 -0
  6. package/dist/cjs/loader.cjs.js +13 -0
  7. package/dist/cjs/loader.cjs.js.map +1 -0
  8. package/dist/cjs/scout-bottom-bar-item.cjs.entry.js +33 -0
  9. package/dist/cjs/scout-bottom-bar-item.entry.cjs.js.map +1 -0
  10. package/dist/cjs/scout-bottom-bar.cjs.entry.js +18 -0
  11. package/dist/cjs/scout-bottom-bar.entry.cjs.js.map +1 -0
  12. package/dist/cjs/scout-button.cjs.entry.js +23 -0
  13. package/dist/cjs/scout-button.entry.cjs.js.map +1 -0
  14. package/dist/cjs/ui-webc.cjs.js +25 -0
  15. package/dist/cjs/ui-webc.cjs.js.map +1 -0
  16. package/dist/collection/collection-manifest.json +14 -0
  17. package/dist/collection/components/bottom-bar/bottom-bar.css +11 -0
  18. package/dist/collection/components/bottom-bar/bottom-bar.js +23 -0
  19. package/dist/collection/components/bottom-bar/bottom-bar.js.map +1 -0
  20. package/dist/collection/components/bottom-bar-item/bottom-bar-item.css +39 -0
  21. package/dist/collection/components/bottom-bar-item/bottom-bar-item.js +160 -0
  22. package/dist/collection/components/bottom-bar-item/bottom-bar-item.js.map +1 -0
  23. package/dist/collection/components/button/button.css +94 -0
  24. package/dist/collection/components/button/button.js +113 -0
  25. package/dist/collection/components/button/button.js.map +1 -0
  26. package/dist/collection/index.js +11 -0
  27. package/dist/collection/index.js.map +1 -0
  28. package/dist/collection/utils/utils.js +4 -0
  29. package/dist/collection/utils/utils.js.map +1 -0
  30. package/dist/components/index.d.ts +33 -0
  31. package/dist/components/index.js +10 -0
  32. package/dist/components/index.js.map +1 -0
  33. package/dist/components/p-CMd0pUms.js +1306 -0
  34. package/dist/components/p-CMd0pUms.js.map +1 -0
  35. package/dist/components/scout-bottom-bar-item.d.ts +11 -0
  36. package/dist/components/scout-bottom-bar-item.js +59 -0
  37. package/dist/components/scout-bottom-bar-item.js.map +1 -0
  38. package/dist/components/scout-bottom-bar.d.ts +11 -0
  39. package/dist/components/scout-bottom-bar.js +38 -0
  40. package/dist/components/scout-bottom-bar.js.map +1 -0
  41. package/dist/components/scout-button.d.ts +11 -0
  42. package/dist/components/scout-button.js +47 -0
  43. package/dist/components/scout-button.js.map +1 -0
  44. package/dist/custom-elements.d.ts +443 -0
  45. package/dist/custom-elements.json +356 -0
  46. package/dist/esm/index-BKWL7m90.js +1507 -0
  47. package/dist/esm/index-BKWL7m90.js.map +1 -0
  48. package/dist/esm/index.js +6 -0
  49. package/dist/esm/index.js.map +1 -0
  50. package/dist/esm/loader.js +11 -0
  51. package/dist/esm/loader.js.map +1 -0
  52. package/dist/esm/scout-bottom-bar-item.entry.js +31 -0
  53. package/dist/esm/scout-bottom-bar-item.entry.js.map +1 -0
  54. package/dist/esm/scout-bottom-bar.entry.js +16 -0
  55. package/dist/esm/scout-bottom-bar.entry.js.map +1 -0
  56. package/dist/esm/scout-button.entry.js +21 -0
  57. package/dist/esm/scout-button.entry.js.map +1 -0
  58. package/dist/esm/ui-webc.js +21 -0
  59. package/dist/esm/ui-webc.js.map +1 -0
  60. package/dist/index.cjs.js +1 -0
  61. package/dist/index.js +1 -0
  62. package/dist/types/components/bottom-bar/bottom-bar.d.ts +7 -0
  63. package/dist/types/components/bottom-bar-item/bottom-bar-item.d.ts +15 -0
  64. package/dist/types/components/button/button.d.ts +12 -0
  65. package/dist/types/components.d.ts +177 -0
  66. package/dist/types/index.d.ts +11 -0
  67. package/dist/types/raw.d.ts +4 -0
  68. package/dist/types/stencil-public-runtime.d.ts +1747 -0
  69. package/dist/types/utils/utils.d.ts +1 -0
  70. package/dist/ui-webc/index.esm.js +2 -0
  71. package/dist/ui-webc/index.esm.js.map +1 -0
  72. package/dist/ui-webc/loader.esm.js.map +1 -0
  73. package/dist/ui-webc/p-2b13b5cd.entry.js +2 -0
  74. package/dist/ui-webc/p-2b13b5cd.entry.js.map +1 -0
  75. package/dist/ui-webc/p-30ef329b.entry.js +2 -0
  76. package/dist/ui-webc/p-30ef329b.entry.js.map +1 -0
  77. package/dist/ui-webc/p-81f97666.entry.js +2 -0
  78. package/dist/ui-webc/p-81f97666.entry.js.map +1 -0
  79. package/dist/ui-webc/p-BKWL7m90.js +3 -0
  80. package/dist/ui-webc/p-BKWL7m90.js.map +1 -0
  81. package/dist/ui-webc/scout-bottom-bar-item.entry.esm.js.map +1 -0
  82. package/dist/ui-webc/scout-bottom-bar.entry.esm.js.map +1 -0
  83. package/dist/ui-webc/scout-button.entry.esm.js.map +1 -0
  84. package/dist/ui-webc/ui-webc.css +1 -0
  85. package/dist/ui-webc/ui-webc.esm.js +2 -0
  86. package/dist/ui-webc/ui-webc.esm.js.map +1 -0
  87. package/loader/cdn.js +1 -0
  88. package/loader/index.cjs.js +1 -0
  89. package/loader/index.d.ts +24 -0
  90. package/loader/index.es2017.js +1 -0
  91. package/loader/index.js +2 -0
  92. package/package.json +73 -0
  93. package/readme.md +111 -0
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ function format(first, middle, last) {
4
+ return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
5
+ }
6
+
7
+ exports.format = format;
8
+ //# sourceMappingURL=index.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs.js","sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"],"names":[],"mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa,EAAA;AACnE,IAAA,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,CAAI,CAAA,EAAA,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAI,CAAA,EAAA,IAAI,EAAE,GAAG,EAAE,CAAC;AAChF;;;;"}
@@ -0,0 +1,13 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-M8pbc2b8.js');
4
+
5
+ const defineCustomElements = async (win, options) => {
6
+ if (typeof window === 'undefined') return undefined;
7
+ await index.globalScripts();
8
+ return index.bootstrapLazy([["scout-bottom-bar.cjs",[[257,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[257,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[257,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]]], options);
9
+ };
10
+
11
+ exports.setNonce = index.setNonce;
12
+ exports.defineCustomElements = defineCustomElements;
13
+ //# sourceMappingURL=loader.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n if (typeof window === 'undefined') return undefined;\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}
@@ -0,0 +1,33 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-M8pbc2b8.js');
4
+
5
+ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
6
+
7
+ const bottomBarItemCss = ":host{display:flex;flex:1}.button{display:flex;flex-direction:column;flex:1;justify-content:center;align-items:center;background-color:transparent;border:none;color:var(--color-text-base);cursor:pointer}.button:hover{background-color:var(--color-neutral-50)}.button.active{background-color:var(--color-blue-50);color:var(--color-blue-500)}.button .icon{width:var(--spacing-6);height:var(--spacing-6)}.button .label{font:var(--type-label-sm)}a{-webkit-text-decoration:none;text-decoration:none}";
8
+
9
+ const ScoutBottomBarItem = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this.scoutClick = index.createEvent(this, "scoutClick");
13
+ }
14
+ type = "button";
15
+ href;
16
+ icon;
17
+ label;
18
+ active;
19
+ scoutClick;
20
+ render() {
21
+ const Tag = this.type === "link" ? "a" : "button";
22
+ const props = this.type === "link"
23
+ ? {
24
+ href: this.href,
25
+ }
26
+ : {};
27
+ return (index.h(Tag, { key: 'c4d0ce76ed8bc1b662e09b781312059c46f2f0d0', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, index.h("span", { key: '8cee80ebeaeba3a04a24cd1672c7496c72d9c4de', class: "icon", innerHTML: this.icon }), index.h("span", { key: 'db470952a8f114c767f8b9ad73580615dd271f7a', class: "label" }, this.label)));
28
+ }
29
+ };
30
+ ScoutBottomBarItem.style = bottomBarItemCss;
31
+
32
+ exports.scout_bottom_bar_item = ScoutBottomBarItem;
33
+ //# sourceMappingURL=scout-bottom-bar-item.entry.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scout-bottom-bar-item.entry.cjs.js","sources":["../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","src/components/bottom-bar-item/bottom-bar-item.css?tag=scout-bottom-bar-item&encapsulation=shadow","src/components/bottom-bar-item/bottom-bar-item.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;",":host {\n display: flex;\n flex: 1;\n}\n\n.button {\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: transparent;\n border: none;\n color: var(--color-text-base);\n cursor: pointer;\n}\n\n.button:hover {\n background-color: var(--color-neutral-50);\n}\n\n.button.active {\n background-color: var(--color-blue-50);\n color: var(--color-blue-500);\n}\n\n.button .icon {\n width: var(--spacing-6);\n height: var(--spacing-6);\n}\n\n.button .label {\n font: var(--type-label-sm);\n}\n\na {\n text-decoration: none;\n}","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\nimport clsx from \"clsx\";\n\nexport type ItemType = \"button\" | \"link\";\n\n/**\n * A bottom bar item used within the bottom bar for navigation. Should not be\n * used outside of a bottom bar.\n */\n@Component({\n tag: \"scout-bottom-bar-item\",\n styleUrl: \"bottom-bar-item.css\",\n shadow: true,\n})\nexport class ScoutBottomBarItem {\n @Prop() type: ItemType = \"button\";\n @Prop() href?: string;\n\n @Prop() icon!: string;\n @Prop() label!: string;\n @Prop() active?: boolean;\n\n @Event()\n scoutClick: EventEmitter<void>;\n\n render() {\n const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n const props =\n this.type === \"link\"\n ? {\n href: this.href,\n }\n : {};\n\n return (\n <Tag\n class={clsx(\"button\", this.active && \"active\")}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n <span class=\"icon\" innerHTML={this.icon} />\n <span class=\"label\">{this.label}</span>\n </Tag>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAQ,SAAS,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;;ACA/W,MAAM,gBAAgB,GAAG,+eAA+e;;MCc3f,kBAAkB,GAAA,MAAA;;;;;IACrB,IAAI,GAAa,QAAQ;AACzB,IAAA,IAAI;AAEJ,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,MAAM;AAGd,IAAA,UAAU;IAEV,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;AAChB;cACD,EAAE;AAER,QAAA,QACEA,OAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAETA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAC3CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CACnC;;;;;;;","x_google_ignoreList":[0]}
@@ -0,0 +1,18 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-M8pbc2b8.js');
4
+
5
+ const bottomBarCss = ":host{display:flex;width:100%}.container{display:flex;flex:1;height:var(--spacing-14);border-top:1px solid var(--color-neutral-100)}";
6
+
7
+ const ScoutBottomBar = class {
8
+ constructor(hostRef) {
9
+ index.registerInstance(this, hostRef);
10
+ }
11
+ render() {
12
+ return (index.h("nav", { key: '68384cb3993fa3ca4a70fdf55f691f728c5cfb2b', class: "container" }, index.h("slot", { key: '5dd9a017d0d7c3d3f0adb516ba66118f73c27841' })));
13
+ }
14
+ };
15
+ ScoutBottomBar.style = bottomBarCss;
16
+
17
+ exports.scout_bottom_bar = ScoutBottomBar;
18
+ //# sourceMappingURL=scout-bottom-bar.entry.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scout-bottom-bar.entry.cjs.js","sources":["src/components/bottom-bar/bottom-bar.css?tag=scout-bottom-bar&encapsulation=shadow","src/components/bottom-bar/bottom-bar.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n.container {\n display: flex;\n flex: 1;\n height: var(--spacing-14);\n border-top: 1px solid var(--color-neutral-100);\n}","import { Component, h } from \"@stencil/core\";\n\n/**\n * The bottom bar component is used in the Jamboree26 app to provide\n * navigation at the bottom of the screen.\n */\n@Component({\n tag: \"scout-bottom-bar\",\n styleUrl: \"bottom-bar.css\",\n shadow: true,\n})\nexport class ScoutBottomBar {\n render() {\n return (\n <nav class=\"container\">\n <slot />\n </nav>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,sIAAsI;;MCW9I,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;"}
@@ -0,0 +1,23 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-M8pbc2b8.js');
4
+
5
+ const buttonCss = ":host{display:inline-flex}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-3);height:var(--spacing-10);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer}.icon{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon svg{width:100%;height:100%}button.primary{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}button.primary:hover{background-color:var(--color-background-brand-hovered)}button.primary:active{background-color:var(--color-background-brand-pressed)}button.outlined{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}button.outlined:hover{background-color:var(--color-background-brand-subtle-hovered)}button.outlined:active{background-color:var(--color-background-brand-subtle-pressed)}button.text{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}button.text:hover{background-color:var(--color-background-brand-subtle-hovered)}button.text:active{background-color:var(--color-background-brand-subtle-pressed)}button.caution{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}button.caution:hover{background-color:var(--color-background-caution-bold-hovered)}button.caution:active{background-color:var(--color-background-caution-bold-pressed)}button.danger{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}button.danger:hover{background-color:var(--color-background-danger-bold-hovered)}button.danger:active{background-color:var(--color-background-danger-bold-pressed)}";
6
+
7
+ const ScoutButton = class {
8
+ constructor(hostRef) {
9
+ index.registerInstance(this, hostRef);
10
+ this.scoutClick = index.createEvent(this, "scoutClick");
11
+ }
12
+ type = "button";
13
+ variant = "outlined";
14
+ icon;
15
+ scoutClick;
16
+ render() {
17
+ return (index.h("button", { key: '7f5877f88cee02bee00680d620d95e61754c0f63', type: this.type, class: this.variant, onClick: () => this.scoutClick.emit() }, index.h("slot", { key: 'd8aa95973f1c6100e7fd91575fec6a245f04775b' }), this.icon && index.h("span", { key: '8ef40fb1765c26c6008ce1d52485e67d50b3360b', class: "icon", innerHTML: this.icon })));
18
+ }
19
+ };
20
+ ScoutButton.style = buttonCss;
21
+
22
+ exports.scout_button = ScoutButton;
23
+ //# sourceMappingURL=scout-button.entry.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n}\n\nbutton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\n height: var(--spacing-10);\n padding: 0 var(--spacing-4);\n font: var(--type-body-base);\n border-radius: var(--spacing-2);\n border: 1px solid transparent;\n cursor: pointer;\n}\n\n.icon {\n width: var(--spacing-5);\n height: var(--spacing-5);\n margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n width: 100%;\n height: 100%;\n}\n\nbutton.primary {\n background-color: var(--color-background-brand-base);\n color: var(--color-text-brand-inverse);\n\n &:hover {\n background-color: var(--color-background-brand-hovered);\n }\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\nbutton.outlined {\n background-color: transparent;\n border-color: var(--color-background-brand-subtle-base);\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\nbutton.text {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\nbutton.caution {\n background-color: var(--color-background-caution-bold-base);\n color: var(--color-text-caution-bold-base);\n\n &:hover {\n background-color: var(--color-background-caution-bold-hovered);\n }\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\nbutton.danger {\n background-color: var(--color-background-danger-bold-base);\n color: var(--color-text-danger-bold-base);\n\n &:hover {\n background-color: var(--color-background-danger-bold-hovered);\n }\n &:active {\n background-color: var(--color-background-danger-bold-pressed);\n }\n}\n","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n tag: \"scout-button\",\n styleUrl: \"button.css\",\n shadow: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n @Prop() variant: Variant = \"outlined\";\n\n @Prop() icon?: string;\n\n @Event()\n scoutClick: EventEmitter<void>;\n\n render() {\n return (\n <button\n type={this.type}\n class={this.variant}\n onClick={() => this.scoutClick.emit()}\n >\n <slot />\n {this.icon && <span class=\"icon\" innerHTML={this.icon} />}\n </button>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,kvDAAkvD;;MCYvvD,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAAkC,QAAQ;IAE9C,OAAO,GAAY,UAAU;AAE7B,IAAA,IAAI;AAGZ,IAAA,UAAU;IAEV,MAAM,GAAA;AACJ,QAAA,QACEA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,EAErCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CAAC,IAAI,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,CAClD;;;;;;;"}
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-M8pbc2b8.js');
4
+
5
+ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
6
+ /*
7
+ Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
8
+ */
9
+
10
+ var patchBrowser = () => {
11
+ const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('ui-webc.cjs.js', document.baseURI).href));
12
+ const opts = {};
13
+ if (importMeta !== "") {
14
+ opts.resourcesUrl = new URL(".", importMeta).href;
15
+ }
16
+ return index.promiseResolve(opts);
17
+ };
18
+
19
+ patchBrowser().then(async (options) => {
20
+ await index.globalScripts();
21
+ return index.bootstrapLazy([["scout-bottom-bar.cjs",[[257,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[257,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[257,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]]], options);
22
+ });
23
+
24
+ exports.setNonce = index.setNonce;
25
+ //# sourceMappingURL=ui-webc.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ui-webc.cjs.js","sources":["../../node_modules/.pnpm/@stencil+core@4.38.1/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,gQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
@@ -0,0 +1,14 @@
1
+ {
2
+ "entries": [
3
+ "components/bottom-bar-item/bottom-bar-item.js",
4
+ "components/button/button.js",
5
+ "components/bottom-bar/bottom-bar.js"
6
+ ],
7
+ "compiler": {
8
+ "name": "@stencil/core",
9
+ "version": "4.38.1",
10
+ "typescriptVersion": "5.9.3"
11
+ },
12
+ "collections": [],
13
+ "bundles": []
14
+ }
@@ -0,0 +1,11 @@
1
+ :host {
2
+ display: flex;
3
+ width: 100%;
4
+ }
5
+
6
+ .container {
7
+ display: flex;
8
+ flex: 1;
9
+ height: var(--spacing-14);
10
+ border-top: 1px solid var(--color-neutral-100);
11
+ }
@@ -0,0 +1,23 @@
1
+ import { h } from "@stencil/core";
2
+ /**
3
+ * The bottom bar component is used in the Jamboree26 app to provide
4
+ * navigation at the bottom of the screen.
5
+ */
6
+ export class ScoutBottomBar {
7
+ render() {
8
+ return (h("nav", { key: '68384cb3993fa3ca4a70fdf55f691f728c5cfb2b', class: "container" }, h("slot", { key: '5dd9a017d0d7c3d3f0adb516ba66118f73c27841' })));
9
+ }
10
+ static get is() { return "scout-bottom-bar"; }
11
+ static get encapsulation() { return "shadow"; }
12
+ static get originalStyleUrls() {
13
+ return {
14
+ "$": ["bottom-bar.css"]
15
+ };
16
+ }
17
+ static get styleUrls() {
18
+ return {
19
+ "$": ["bottom-bar.css"]
20
+ };
21
+ }
22
+ }
23
+ //# sourceMappingURL=bottom-bar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"bottom-bar.js","sourceRoot":"","sources":["../../../src/components/bottom-bar/bottom-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;GAGG;AAMH,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from \"@stencil/core\";\n\n/**\n * The bottom bar component is used in the Jamboree26 app to provide\n * navigation at the bottom of the screen.\n */\n@Component({\n tag: \"scout-bottom-bar\",\n styleUrl: \"bottom-bar.css\",\n shadow: true,\n})\nexport class ScoutBottomBar {\n render() {\n return (\n <nav class=\"container\">\n <slot />\n </nav>\n );\n }\n}\n"]}
@@ -0,0 +1,39 @@
1
+ :host {
2
+ display: flex;
3
+ flex: 1;
4
+ }
5
+
6
+ .button {
7
+ display: flex;
8
+ flex-direction: column;
9
+ flex: 1;
10
+ justify-content: center;
11
+ align-items: center;
12
+ background-color: transparent;
13
+ border: none;
14
+ color: var(--color-text-base);
15
+ cursor: pointer;
16
+ }
17
+
18
+ .button:hover {
19
+ background-color: var(--color-neutral-50);
20
+ }
21
+
22
+ .button.active {
23
+ background-color: var(--color-blue-50);
24
+ color: var(--color-blue-500);
25
+ }
26
+
27
+ .button .icon {
28
+ width: var(--spacing-6);
29
+ height: var(--spacing-6);
30
+ }
31
+
32
+ .button .label {
33
+ font: var(--type-label-sm);
34
+ }
35
+
36
+ a {
37
+ -webkit-text-decoration: none;
38
+ text-decoration: none;
39
+ }
@@ -0,0 +1,160 @@
1
+ import { h } from "@stencil/core";
2
+ import clsx from "clsx";
3
+ /**
4
+ * A bottom bar item used within the bottom bar for navigation. Should not be
5
+ * used outside of a bottom bar.
6
+ */
7
+ export class ScoutBottomBarItem {
8
+ type = "button";
9
+ href;
10
+ icon;
11
+ label;
12
+ active;
13
+ scoutClick;
14
+ render() {
15
+ const Tag = this.type === "link" ? "a" : "button";
16
+ const props = this.type === "link"
17
+ ? {
18
+ href: this.href,
19
+ }
20
+ : {};
21
+ return (h(Tag, { key: 'c4d0ce76ed8bc1b662e09b781312059c46f2f0d0', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: '8cee80ebeaeba3a04a24cd1672c7496c72d9c4de', class: "icon", innerHTML: this.icon }), h("span", { key: 'db470952a8f114c767f8b9ad73580615dd271f7a', class: "label" }, this.label)));
22
+ }
23
+ static get is() { return "scout-bottom-bar-item"; }
24
+ static get encapsulation() { return "shadow"; }
25
+ static get originalStyleUrls() {
26
+ return {
27
+ "$": ["bottom-bar-item.css"]
28
+ };
29
+ }
30
+ static get styleUrls() {
31
+ return {
32
+ "$": ["bottom-bar-item.css"]
33
+ };
34
+ }
35
+ static get properties() {
36
+ return {
37
+ "type": {
38
+ "type": "string",
39
+ "mutable": false,
40
+ "complexType": {
41
+ "original": "ItemType",
42
+ "resolved": "\"button\" | \"link\"",
43
+ "references": {
44
+ "ItemType": {
45
+ "location": "local",
46
+ "path": "/home/scriptcoded/projects/scouterna/jamboree26/j26-web-components/packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.tsx",
47
+ "id": "src/components/bottom-bar-item/bottom-bar-item.tsx::ItemType"
48
+ }
49
+ }
50
+ },
51
+ "required": false,
52
+ "optional": false,
53
+ "docs": {
54
+ "tags": [],
55
+ "text": ""
56
+ },
57
+ "getter": false,
58
+ "setter": false,
59
+ "reflect": false,
60
+ "attribute": "type",
61
+ "defaultValue": "\"button\""
62
+ },
63
+ "href": {
64
+ "type": "string",
65
+ "mutable": false,
66
+ "complexType": {
67
+ "original": "string",
68
+ "resolved": "string",
69
+ "references": {}
70
+ },
71
+ "required": false,
72
+ "optional": true,
73
+ "docs": {
74
+ "tags": [],
75
+ "text": ""
76
+ },
77
+ "getter": false,
78
+ "setter": false,
79
+ "reflect": false,
80
+ "attribute": "href"
81
+ },
82
+ "icon": {
83
+ "type": "string",
84
+ "mutable": false,
85
+ "complexType": {
86
+ "original": "string",
87
+ "resolved": "string",
88
+ "references": {}
89
+ },
90
+ "required": true,
91
+ "optional": false,
92
+ "docs": {
93
+ "tags": [],
94
+ "text": ""
95
+ },
96
+ "getter": false,
97
+ "setter": false,
98
+ "reflect": false,
99
+ "attribute": "icon"
100
+ },
101
+ "label": {
102
+ "type": "string",
103
+ "mutable": false,
104
+ "complexType": {
105
+ "original": "string",
106
+ "resolved": "string",
107
+ "references": {}
108
+ },
109
+ "required": true,
110
+ "optional": false,
111
+ "docs": {
112
+ "tags": [],
113
+ "text": ""
114
+ },
115
+ "getter": false,
116
+ "setter": false,
117
+ "reflect": false,
118
+ "attribute": "label"
119
+ },
120
+ "active": {
121
+ "type": "boolean",
122
+ "mutable": false,
123
+ "complexType": {
124
+ "original": "boolean",
125
+ "resolved": "boolean",
126
+ "references": {}
127
+ },
128
+ "required": false,
129
+ "optional": true,
130
+ "docs": {
131
+ "tags": [],
132
+ "text": ""
133
+ },
134
+ "getter": false,
135
+ "setter": false,
136
+ "reflect": false,
137
+ "attribute": "active"
138
+ }
139
+ };
140
+ }
141
+ static get events() {
142
+ return [{
143
+ "method": "scoutClick",
144
+ "name": "scoutClick",
145
+ "bubbles": true,
146
+ "cancelable": true,
147
+ "composed": true,
148
+ "docs": {
149
+ "tags": [],
150
+ "text": ""
151
+ },
152
+ "complexType": {
153
+ "original": "void",
154
+ "resolved": "void",
155
+ "references": {}
156
+ }
157
+ }];
158
+ }
159
+ }
160
+ //# sourceMappingURL=bottom-bar-item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"bottom-bar-item.js","sourceRoot":"","sources":["../../../src/components/bottom-bar-item/bottom-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB;;;GAGG;AAMH,MAAM,OAAO,kBAAkB;IACrB,IAAI,GAAa,QAAQ,CAAC;IAC1B,IAAI,CAAU;IAEd,IAAI,CAAU;IACd,KAAK,CAAU;IACf,MAAM,CAAW;IAGzB,UAAU,CAAqB;IAE/B,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;YACH,CAAC,CAAC,EAAE,CAAC;QAET,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;YAC3C,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\nimport clsx from \"clsx\";\n\nexport type ItemType = \"button\" | \"link\";\n\n/**\n * A bottom bar item used within the bottom bar for navigation. Should not be\n * used outside of a bottom bar.\n */\n@Component({\n tag: \"scout-bottom-bar-item\",\n styleUrl: \"bottom-bar-item.css\",\n shadow: true,\n})\nexport class ScoutBottomBarItem {\n @Prop() type: ItemType = \"button\";\n @Prop() href?: string;\n\n @Prop() icon!: string;\n @Prop() label!: string;\n @Prop() active?: boolean;\n\n @Event()\n scoutClick: EventEmitter<void>;\n\n render() {\n const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n const props =\n this.type === \"link\"\n ? {\n href: this.href,\n }\n : {};\n\n return (\n <Tag\n class={clsx(\"button\", this.active && \"active\")}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n <span class=\"icon\" innerHTML={this.icon} />\n <span class=\"label\">{this.label}</span>\n </Tag>\n );\n }\n}\n"]}
@@ -0,0 +1,94 @@
1
+ :host {
2
+ display: inline-flex;
3
+ }
4
+
5
+ button {
6
+ display: inline-flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ gap: var(--spacing-3);
10
+ height: var(--spacing-10);
11
+ padding: 0 var(--spacing-4);
12
+ font: var(--type-body-base);
13
+ border-radius: var(--spacing-2);
14
+ border: 1px solid transparent;
15
+ cursor: pointer;
16
+ }
17
+
18
+ .icon {
19
+ width: var(--spacing-5);
20
+ height: var(--spacing-5);
21
+ margin: 0 calc(var(--spacing-1) * -1);
22
+ }
23
+
24
+ .icon svg {
25
+ width: 100%;
26
+ height: 100%;
27
+ }
28
+
29
+ button.primary {
30
+ background-color: var(--color-background-brand-base);
31
+ color: var(--color-text-brand-inverse);
32
+ }
33
+
34
+ button.primary:hover {
35
+ background-color: var(--color-background-brand-hovered);
36
+ }
37
+
38
+ button.primary:active {
39
+ background-color: var(--color-background-brand-pressed);
40
+ }
41
+
42
+ button.outlined {
43
+ background-color: transparent;
44
+ border-color: var(--color-background-brand-subtle-base);
45
+ color: var(--color-text-brand-base);
46
+ }
47
+
48
+ button.outlined:hover {
49
+ background-color: var(--color-background-brand-subtle-hovered);
50
+ }
51
+
52
+ button.outlined:active {
53
+ background-color: var(--color-background-brand-subtle-pressed);
54
+ }
55
+
56
+ button.text {
57
+ background-color: transparent;
58
+ border-color: transparent;
59
+ color: var(--color-text-brand-base);
60
+ }
61
+
62
+ button.text:hover {
63
+ background-color: var(--color-background-brand-subtle-hovered);
64
+ }
65
+
66
+ button.text:active {
67
+ background-color: var(--color-background-brand-subtle-pressed);
68
+ }
69
+
70
+ button.caution {
71
+ background-color: var(--color-background-caution-bold-base);
72
+ color: var(--color-text-caution-bold-base);
73
+ }
74
+
75
+ button.caution:hover {
76
+ background-color: var(--color-background-caution-bold-hovered);
77
+ }
78
+
79
+ button.caution:active {
80
+ background-color: var(--color-background-caution-bold-pressed);
81
+ }
82
+
83
+ button.danger {
84
+ background-color: var(--color-background-danger-bold-base);
85
+ color: var(--color-text-danger-bold-base);
86
+ }
87
+
88
+ button.danger:hover {
89
+ background-color: var(--color-background-danger-bold-hovered);
90
+ }
91
+
92
+ button.danger:active {
93
+ background-color: var(--color-background-danger-bold-pressed);
94
+ }
@@ -0,0 +1,113 @@
1
+ import { h } from "@stencil/core";
2
+ /**
3
+ * A simple button component.
4
+ */
5
+ export class ScoutButton {
6
+ type = "button";
7
+ variant = "outlined";
8
+ icon;
9
+ scoutClick;
10
+ render() {
11
+ return (h("button", { key: '7f5877f88cee02bee00680d620d95e61754c0f63', type: this.type, class: this.variant, onClick: () => this.scoutClick.emit() }, h("slot", { key: 'd8aa95973f1c6100e7fd91575fec6a245f04775b' }), this.icon && h("span", { key: '8ef40fb1765c26c6008ce1d52485e67d50b3360b', class: "icon", innerHTML: this.icon })));
12
+ }
13
+ static get is() { return "scout-button"; }
14
+ static get encapsulation() { return "shadow"; }
15
+ static get originalStyleUrls() {
16
+ return {
17
+ "$": ["button.css"]
18
+ };
19
+ }
20
+ static get styleUrls() {
21
+ return {
22
+ "$": ["button.css"]
23
+ };
24
+ }
25
+ static get properties() {
26
+ return {
27
+ "type": {
28
+ "type": "string",
29
+ "mutable": false,
30
+ "complexType": {
31
+ "original": "\"button\" | \"submit\" | \"reset\"",
32
+ "resolved": "\"button\" | \"reset\" | \"submit\"",
33
+ "references": {}
34
+ },
35
+ "required": false,
36
+ "optional": false,
37
+ "docs": {
38
+ "tags": [],
39
+ "text": ""
40
+ },
41
+ "getter": false,
42
+ "setter": false,
43
+ "reflect": false,
44
+ "attribute": "type",
45
+ "defaultValue": "\"button\""
46
+ },
47
+ "variant": {
48
+ "type": "string",
49
+ "mutable": false,
50
+ "complexType": {
51
+ "original": "Variant",
52
+ "resolved": "\"caution\" | \"danger\" | \"outlined\" | \"primary\" | \"text\"",
53
+ "references": {
54
+ "Variant": {
55
+ "location": "local",
56
+ "path": "/home/scriptcoded/projects/scouterna/jamboree26/j26-web-components/packages/ui-webc/src/components/button/button.tsx",
57
+ "id": "src/components/button/button.tsx::Variant"
58
+ }
59
+ }
60
+ },
61
+ "required": false,
62
+ "optional": false,
63
+ "docs": {
64
+ "tags": [],
65
+ "text": ""
66
+ },
67
+ "getter": false,
68
+ "setter": false,
69
+ "reflect": false,
70
+ "attribute": "variant",
71
+ "defaultValue": "\"outlined\""
72
+ },
73
+ "icon": {
74
+ "type": "string",
75
+ "mutable": false,
76
+ "complexType": {
77
+ "original": "string",
78
+ "resolved": "string",
79
+ "references": {}
80
+ },
81
+ "required": false,
82
+ "optional": true,
83
+ "docs": {
84
+ "tags": [],
85
+ "text": ""
86
+ },
87
+ "getter": false,
88
+ "setter": false,
89
+ "reflect": false,
90
+ "attribute": "icon"
91
+ }
92
+ };
93
+ }
94
+ static get events() {
95
+ return [{
96
+ "method": "scoutClick",
97
+ "name": "scoutClick",
98
+ "bubbles": true,
99
+ "cancelable": true,
100
+ "composed": true,
101
+ "docs": {
102
+ "tags": [],
103
+ "text": ""
104
+ },
105
+ "complexType": {
106
+ "original": "void",
107
+ "resolved": "void",
108
+ "references": {}
109
+ }
110
+ }];
111
+ }
112
+ }
113
+ //# sourceMappingURL=button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;GAEG;AAMH,MAAM,OAAO,WAAW;IACd,IAAI,GAAkC,QAAQ,CAAC;IAE/C,OAAO,GAAY,UAAU,CAAC;IAE9B,IAAI,CAAU;IAGtB,UAAU,CAAqB;IAE/B,MAAM;QACJ,OAAO,CACL,+DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YAErC,8DAAQ;YACP,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAClD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n tag: \"scout-button\",\n styleUrl: \"button.css\",\n shadow: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n @Prop() variant: Variant = \"outlined\";\n\n @Prop() icon?: string;\n\n @Event()\n scoutClick: EventEmitter<void>;\n\n render() {\n return (\n <button\n type={this.type}\n class={this.variant}\n onClick={() => this.scoutClick.emit()}\n >\n <slot />\n {this.icon && <span class=\"icon\" innerHTML={this.icon} />}\n </button>\n );\n }\n}\n"]}