@scouterna/ui-webc 2.2.2 → 2.2.3
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/dist/cjs/scout-button.cjs.entry.js +1 -1
- package/dist/cjs/scout-button.entry.cjs.js.map +1 -1
- package/dist/collection/components/button/button.css +4 -0
- package/dist/components/scout-button.js +1 -1
- package/dist/components/scout-button.js.map +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/esm/scout-button.entry.js +1 -1
- package/dist/esm/scout-button.entry.js.map +1 -1
- package/dist/ui-webc/p-059921bb.entry.js +2 -0
- package/dist/ui-webc/{p-3e750355.entry.js.map → p-059921bb.entry.js.map} +1 -1
- package/dist/ui-webc/scout-button.entry.esm.js.map +1 -1
- package/dist/ui-webc/ui-webc.esm.js +1 -1
- package/package.json +4 -3
- package/dist/ui-webc/p-3e750355.entry.js +0 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-B3fXatmo.js');
|
|
4
4
|
|
|
5
|
-
const buttonCss = ".button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
|
|
5
|
+
const buttonCss = ".sc-scout-button-h{display:inline-block}.button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
|
|
6
6
|
|
|
7
7
|
const ScoutButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[".button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\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 text-decoration: none;\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\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.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\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 scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() 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 target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"scout-button.entry.cjs.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\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 text-decoration: none;\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\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.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\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 scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() 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 target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCYl8E,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,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;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACEA,OAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-fr5CaUFu.js';
|
|
2
2
|
|
|
3
|
-
const buttonCss = ".button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
|
|
3
|
+
const buttonCss = ".sc-scout-button-h{display:inline-block}.button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
|
|
4
4
|
|
|
5
5
|
const ScoutButton$1 = /*@__PURE__*/ proxyCustomElement(class ScoutButton extends H {
|
|
6
6
|
constructor(registerHost) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"scout-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"scout-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCYl8EA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,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;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACE,CAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ScoutButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\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 text-decoration: none;\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\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.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\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 scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() 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 target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-ksA_9NPe.js';
|
|
2
2
|
|
|
3
|
-
const buttonCss = ".button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
|
|
3
|
+
const buttonCss = ".sc-scout-button-h{display:inline-block}.button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";
|
|
4
4
|
|
|
5
5
|
const ScoutButton = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-button.entry.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[".button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\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 text-decoration: none;\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\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.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\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 scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() 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 target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"scout-button.entry.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\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 text-decoration: none;\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\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.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\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 scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() 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 target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCYl8E,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,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;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACE,CAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as t,h as c}from"./p-ksA_9NPe.js";const r=".sc-scout-button-h{display:inline-block}.button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";const n=class{constructor(c){o(this,c);this.scoutClick=t(this,"scoutClick")}type="button";href;target;rel;variant="outlined";icon;iconPosition="after";iconOnly=false;scoutClick;render(){const o=this.type==="link"?"a":"button";const t=this.type==="link"?{href:this.href,target:this.target,rel:this.rel??(this.target==="_blank"?"noopener noreferrer":undefined)}:{type:this.type};const r=this.icon&&c("span",{key:"4a3e7eb143e3cf53d6a6327163be00947d3cf370",class:"icon",innerHTML:this.icon});return c(o,{key:"d7807c803a4032c6a48c9ffbc08ea1b4bb845058",class:`button ${this.variant} ${this.iconOnly?"icon-only":""}`,onClick:()=>this.scoutClick.emit(),...t},this.iconPosition==="before"&&r,c("span",{key:"f89787ee6e018587d87c1656d32c1b438263d8c9",class:"content"},c("slot",{key:"31567811c1d3151aaa74546df5c50fc01a41d582"})),this.iconPosition==="after"&&r)}};n.style=r;export{n as scout_button};
|
|
2
|
+
//# sourceMappingURL=p-059921bb.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","createEvent","h","buttonCss","ScoutButton","constructor","hostRef","this","scoutClick","type","href","target","rel","variant","icon","iconPosition","iconOnly","render","Tag","props","undefined","key","class","innerHTML","onClick","emit","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,MAAS,kBAE3D,MAAMC,EAAY,
|
|
1
|
+
{"version":3,"names":["registerInstance","createEvent","h","buttonCss","ScoutButton","constructor","hostRef","this","scoutClick","type","href","target","rel","variant","icon","iconPosition","iconOnly","render","Tag","props","undefined","key","class","innerHTML","onClick","emit","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,MAAS,kBAE3D,MAAMC,EAAY,87EAElB,MAAMC,EAAc,MAChB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,WAAaP,EAAYM,KAAM,aACxC,CACAE,KAAO,SACPC,KACAC,OACAC,IAIAC,QAAU,WAIVC,KACAC,aAAe,QACfC,SAAW,MACXR,WACA,MAAAS,GACI,MAAMC,EAAMX,KAAKE,OAAS,OAAS,IAAM,SACzC,MAAMU,EAAQZ,KAAKE,OAAS,OACtB,CACEC,KAAMH,KAAKG,KACXC,OAAQJ,KAAKI,OAEbC,IAAKL,KAAKK,MACLL,KAAKI,SAAW,SAAW,sBAAwBS,YAE1D,CACEX,KAAMF,KAAKE,MAEnB,MAAMK,EAAOP,KAAKO,MAAQZ,EAAE,OAAQ,CAAEmB,IAAK,2CAA4CC,MAAO,OAAQC,UAAWhB,KAAKO,OACtH,OAAQZ,EAAEgB,EAAK,CAAEG,IAAK,2CAA4CC,MAAO,UAAUf,KAAKM,WAAWN,KAAKS,SAAW,YAAc,KAAMQ,QAAS,IAAMjB,KAAKC,WAAWiB,UAAWN,GAASZ,KAAKQ,eAAiB,UAAYD,EAAMZ,EAAE,OAAQ,CAAEmB,IAAK,2CAA4CC,MAAO,WAAapB,EAAE,OAAQ,CAAEmB,IAAK,8CAAgDd,KAAKQ,eAAiB,SAAWD,EACzZ,GAEJV,EAAYsB,MAAQvB,SAEXC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scout-button.entry.esm.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[".button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\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 text-decoration: none;\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\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.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\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 scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() 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 target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"scout-button.entry.esm.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\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 text-decoration: none;\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\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.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\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.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\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 scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() 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 target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCYl8E,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,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;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACE,CAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,g as a,b as t}from"./p-ksA_9NPe.js";export{s as setNonce}from"./p-ksA_9NPe.js";var l=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};l().then((async e=>{await a();return t([["p-3018f46f",[[785,"scout-list-view-item",{icon:[1],primary:[1],secondary:[1],type:[1],href:[1],target:[1],rel:[1],name:[1],value:[1],checked:[4]}]]],["p-e4f5dad7",[[785,"scout-app-bar",{titleText:[1,"title-text"]}]]],["p-50112773",[[273,"scout-bottom-bar"]]],["p-c2c5857d",[[785,"scout-bottom-bar-item",{type:[1],href:[1],target:[1],rel:[1],icon:[1],label:[1],active:[4]}]]],["p-
|
|
1
|
+
import{p as e,g as a,b as t}from"./p-ksA_9NPe.js";export{s as setNonce}from"./p-ksA_9NPe.js";var l=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};l().then((async e=>{await a();return t([["p-3018f46f",[[785,"scout-list-view-item",{icon:[1],primary:[1],secondary:[1],type:[1],href:[1],target:[1],rel:[1],name:[1],value:[1],checked:[4]}]]],["p-e4f5dad7",[[785,"scout-app-bar",{titleText:[1,"title-text"]}]]],["p-50112773",[[273,"scout-bottom-bar"]]],["p-c2c5857d",[[785,"scout-bottom-bar-item",{type:[1],href:[1],target:[1],rel:[1],icon:[1],label:[1],active:[4]}]]],["p-059921bb",[[774,"scout-button",{type:[1],href:[1],target:[1],rel:[1],variant:[1],icon:[1],iconPosition:[1,"icon-position"],iconOnly:[4,"icon-only"]}]]],["p-97f9cf0a",[[273,"scout-card"]]],["p-ac65f104",[[273,"scout-divider"]]],["p-d999b8d6",[[774,"scout-field",{label:[1],helpText:[1,"help-text"],inputId:[32],errorText:[32],errorHidden:[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["p-479ae616",[[770,"scout-input",{validate:[16],type:[1],inputmode:[1],pattern:[1],value:[1],name:[1],disabled:[4],ariaId:[32]}]]],["p-1efd7b9a",[[785,"scout-link",{href:[1],label:[1],rel:[1],linkAriaLabel:[1,"link-aria-label"],type:[1],target:[1]}]]],["p-e2288570",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["p-02c211ea",[[785,"scout-list-view-subheader",{text:[1],headingLevel:[1,"heading-level"]}]]],["p-97956c4f",[[769,"scout-loader",{text:[1],size:[1]}]]],["p-d8084e5c",[[774,"scout-select",{validate:[16],value:[1],disabled:[4],name:[1],ariaId:[32]}]]],["p-974e8415",[[785,"scout-stack",{direction:[1],gapSize:[1,"gap-size"]}]]],["p-1a701759",[[785,"scout-switch",{validate:[16],toggled:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],ariaId:[32]}]]],["p-4616484e",[[770,"scout-checkbox",{validate:[16],checked:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],value:[1],name:[1],ariaId:[32]}],[770,"scout-radio-button",{validate:[16],checked:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],value:[1],name:[1],ariaId:[32]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=ui-webc.esm.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scouterna/ui-webc",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Scouterna Design System Web Components",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
@@ -34,7 +34,8 @@
|
|
|
34
34
|
},
|
|
35
35
|
"repository": {
|
|
36
36
|
"type": "git",
|
|
37
|
-
"url": "https://github.com/Scouterna/j26-components.git"
|
|
37
|
+
"url": "https://github.com/Scouterna/j26-components.git",
|
|
38
|
+
"directory": "packages/ui-webc"
|
|
38
39
|
},
|
|
39
40
|
"files": [
|
|
40
41
|
"dist/",
|
|
@@ -46,7 +47,7 @@
|
|
|
46
47
|
"clsx": "^2.1.1",
|
|
47
48
|
"iconoir": "^7.11.0",
|
|
48
49
|
"@tabler/icons": "^3.35.0",
|
|
49
|
-
"@scouterna/design-tokens": "^0.0.
|
|
50
|
+
"@scouterna/design-tokens": "^0.0.5"
|
|
50
51
|
},
|
|
51
52
|
"devDependencies": {
|
|
52
53
|
"@stencil-community/postcss": "^2.2.0",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as o,c as t,h as c}from"./p-ksA_9NPe.js";const r=".button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";const n=class{constructor(c){o(this,c);this.scoutClick=t(this,"scoutClick")}type="button";href;target;rel;variant="outlined";icon;iconPosition="after";iconOnly=false;scoutClick;render(){const o=this.type==="link"?"a":"button";const t=this.type==="link"?{href:this.href,target:this.target,rel:this.rel??(this.target==="_blank"?"noopener noreferrer":undefined)}:{type:this.type};const r=this.icon&&c("span",{key:"4a3e7eb143e3cf53d6a6327163be00947d3cf370",class:"icon",innerHTML:this.icon});return c(o,{key:"d7807c803a4032c6a48c9ffbc08ea1b4bb845058",class:`button ${this.variant} ${this.iconOnly?"icon-only":""}`,onClick:()=>this.scoutClick.emit(),...t},this.iconPosition==="before"&&r,c("span",{key:"f89787ee6e018587d87c1656d32c1b438263d8c9",class:"content"},c("slot",{key:"31567811c1d3151aaa74546df5c50fc01a41d582"})),this.iconPosition==="after"&&r)}};n.style=r;export{n as scout_button};
|
|
2
|
-
//# sourceMappingURL=p-3e750355.entry.js.map
|