@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.
- package/LICENSE +21 -0
- package/dist/cjs/index-M8pbc2b8.js +1515 -0
- package/dist/cjs/index-M8pbc2b8.js.map +1 -0
- package/dist/cjs/index.cjs.js +8 -0
- package/dist/cjs/index.cjs.js.map +1 -0
- package/dist/cjs/loader.cjs.js +13 -0
- package/dist/cjs/loader.cjs.js.map +1 -0
- package/dist/cjs/scout-bottom-bar-item.cjs.entry.js +33 -0
- package/dist/cjs/scout-bottom-bar-item.entry.cjs.js.map +1 -0
- package/dist/cjs/scout-bottom-bar.cjs.entry.js +18 -0
- package/dist/cjs/scout-bottom-bar.entry.cjs.js.map +1 -0
- package/dist/cjs/scout-button.cjs.entry.js +23 -0
- package/dist/cjs/scout-button.entry.cjs.js.map +1 -0
- package/dist/cjs/ui-webc.cjs.js +25 -0
- package/dist/cjs/ui-webc.cjs.js.map +1 -0
- package/dist/collection/collection-manifest.json +14 -0
- package/dist/collection/components/bottom-bar/bottom-bar.css +11 -0
- package/dist/collection/components/bottom-bar/bottom-bar.js +23 -0
- package/dist/collection/components/bottom-bar/bottom-bar.js.map +1 -0
- package/dist/collection/components/bottom-bar-item/bottom-bar-item.css +39 -0
- package/dist/collection/components/bottom-bar-item/bottom-bar-item.js +160 -0
- package/dist/collection/components/bottom-bar-item/bottom-bar-item.js.map +1 -0
- package/dist/collection/components/button/button.css +94 -0
- package/dist/collection/components/button/button.js +113 -0
- package/dist/collection/components/button/button.js.map +1 -0
- package/dist/collection/index.js +11 -0
- package/dist/collection/index.js.map +1 -0
- package/dist/collection/utils/utils.js +4 -0
- package/dist/collection/utils/utils.js.map +1 -0
- package/dist/components/index.d.ts +33 -0
- package/dist/components/index.js +10 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/p-CMd0pUms.js +1306 -0
- package/dist/components/p-CMd0pUms.js.map +1 -0
- package/dist/components/scout-bottom-bar-item.d.ts +11 -0
- package/dist/components/scout-bottom-bar-item.js +59 -0
- package/dist/components/scout-bottom-bar-item.js.map +1 -0
- package/dist/components/scout-bottom-bar.d.ts +11 -0
- package/dist/components/scout-bottom-bar.js +38 -0
- package/dist/components/scout-bottom-bar.js.map +1 -0
- package/dist/components/scout-button.d.ts +11 -0
- package/dist/components/scout-button.js +47 -0
- package/dist/components/scout-button.js.map +1 -0
- package/dist/custom-elements.d.ts +443 -0
- package/dist/custom-elements.json +356 -0
- package/dist/esm/index-BKWL7m90.js +1507 -0
- package/dist/esm/index-BKWL7m90.js.map +1 -0
- package/dist/esm/index.js +6 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/loader.js +11 -0
- package/dist/esm/loader.js.map +1 -0
- package/dist/esm/scout-bottom-bar-item.entry.js +31 -0
- package/dist/esm/scout-bottom-bar-item.entry.js.map +1 -0
- package/dist/esm/scout-bottom-bar.entry.js +16 -0
- package/dist/esm/scout-bottom-bar.entry.js.map +1 -0
- package/dist/esm/scout-button.entry.js +21 -0
- package/dist/esm/scout-button.entry.js.map +1 -0
- package/dist/esm/ui-webc.js +21 -0
- package/dist/esm/ui-webc.js.map +1 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/types/components/bottom-bar/bottom-bar.d.ts +7 -0
- package/dist/types/components/bottom-bar-item/bottom-bar-item.d.ts +15 -0
- package/dist/types/components/button/button.d.ts +12 -0
- package/dist/types/components.d.ts +177 -0
- package/dist/types/index.d.ts +11 -0
- package/dist/types/raw.d.ts +4 -0
- package/dist/types/stencil-public-runtime.d.ts +1747 -0
- package/dist/types/utils/utils.d.ts +1 -0
- package/dist/ui-webc/index.esm.js +2 -0
- package/dist/ui-webc/index.esm.js.map +1 -0
- package/dist/ui-webc/loader.esm.js.map +1 -0
- package/dist/ui-webc/p-2b13b5cd.entry.js +2 -0
- package/dist/ui-webc/p-2b13b5cd.entry.js.map +1 -0
- package/dist/ui-webc/p-30ef329b.entry.js +2 -0
- package/dist/ui-webc/p-30ef329b.entry.js.map +1 -0
- package/dist/ui-webc/p-81f97666.entry.js +2 -0
- package/dist/ui-webc/p-81f97666.entry.js.map +1 -0
- package/dist/ui-webc/p-BKWL7m90.js +3 -0
- package/dist/ui-webc/p-BKWL7m90.js.map +1 -0
- package/dist/ui-webc/scout-bottom-bar-item.entry.esm.js.map +1 -0
- package/dist/ui-webc/scout-bottom-bar.entry.esm.js.map +1 -0
- package/dist/ui-webc/scout-button.entry.esm.js.map +1 -0
- package/dist/ui-webc/ui-webc.css +1 -0
- package/dist/ui-webc/ui-webc.esm.js +2 -0
- package/dist/ui-webc/ui-webc.esm.js.map +1 -0
- package/loader/cdn.js +1 -0
- package/loader/index.cjs.js +1 -0
- package/loader/index.d.ts +24 -0
- package/loader/index.es2017.js +1 -0
- package/loader/index.js +2 -0
- package/package.json +73 -0
- package/readme.md +111 -0
|
@@ -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,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"]}
|