@cas-smartdesign/button 5.3.0 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button.d.ts +6 -4
- package/dist/button.d.ts.map +1 -0
- package/dist/button.mjs +80 -185
- package/dist/button.mjs.map +1 -1
- package/dist/docs/created_from_source.js +1 -1
- package/dist/docs/declarative_with_source.js +1 -1
- package/dist/docs/doc.css +1 -1
- package/dist/docs/doc.mjs +50 -46
- package/npm-third-party-licenses.json +54 -104
- package/package.json +12 -11
- package/readme.md +2 -0
- package/dist/button-with-externals.js +0 -107
- package/dist/button-with-externals.js.map +0 -7
|
@@ -1,88 +1,58 @@
|
|
|
1
1
|
{
|
|
2
|
-
"@cypress/vite-dev-server@7.
|
|
2
|
+
"@cypress/vite-dev-server@7.2.1": {
|
|
3
3
|
"licenses": "MIT",
|
|
4
4
|
"repository": "https://github.com/cypress-io/cypress",
|
|
5
5
|
"licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
|
|
6
6
|
},
|
|
7
|
-
"@
|
|
7
|
+
"@tsdown/css@0.21.7": {
|
|
8
8
|
"licenses": "MIT",
|
|
9
|
-
"repository": "https://github.com/
|
|
10
|
-
"licenseUrl": "https://unpkg.com/@
|
|
9
|
+
"repository": "https://github.com/rolldown/tsdown",
|
|
10
|
+
"licenseUrl": "https://unpkg.com/@tsdown/css@0.21.7/LICENSE"
|
|
11
11
|
},
|
|
12
|
-
"@
|
|
13
|
-
"licenses": "MIT",
|
|
14
|
-
"repository": "https://github.com/rollup/plugins",
|
|
15
|
-
"licenseUrl": "https://unpkg.com/@rollup/plugin-node-resolve@16.0.1/LICENSE"
|
|
16
|
-
},
|
|
17
|
-
"@types/node@24.3.0": {
|
|
12
|
+
"@types/node@25.5.2": {
|
|
18
13
|
"licenses": "MIT",
|
|
19
14
|
"repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
|
|
20
|
-
"licenseUrl": "https://unpkg.com/@types/node@
|
|
15
|
+
"licenseUrl": "https://unpkg.com/@types/node@25.5.2/LICENSE"
|
|
21
16
|
},
|
|
22
17
|
"@types/postcss-prefix-selector@1.16.3": {
|
|
23
18
|
"licenses": "MIT",
|
|
24
19
|
"repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
|
|
25
20
|
"licenseUrl": "https://unpkg.com/@types/postcss-prefix-selector@1.16.3/LICENSE"
|
|
26
21
|
},
|
|
27
|
-
"@
|
|
22
|
+
"@types/yargs@17.0.35": {
|
|
28
23
|
"licenses": "MIT",
|
|
29
|
-
"repository": "https://github.com/
|
|
30
|
-
"licenseUrl": "https://unpkg.com/@
|
|
31
|
-
},
|
|
32
|
-
"@typescript-eslint/parser@8.41.0": {
|
|
33
|
-
"licenses": "MIT",
|
|
34
|
-
"repository": "https://github.com/typescript-eslint/typescript-eslint",
|
|
35
|
-
"licenseUrl": "https://unpkg.com/@typescript-eslint/parser@8.41.0/LICENSE"
|
|
24
|
+
"repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
|
|
25
|
+
"licenseUrl": "https://unpkg.com/@types/yargs@17.0.35/LICENSE"
|
|
36
26
|
},
|
|
37
|
-
"@vitest/coverage-v8@4.
|
|
27
|
+
"@vitest/coverage-v8@4.1.2": {
|
|
38
28
|
"licenses": "MIT",
|
|
39
29
|
"repository": "https://github.com/vitest-dev/vitest",
|
|
40
|
-
"licenseUrl": "https://unpkg.com/@vitest/coverage-v8@4.
|
|
30
|
+
"licenseUrl": "https://unpkg.com/@vitest/coverage-v8@4.1.2/LICENSE"
|
|
41
31
|
},
|
|
42
|
-
"@vitest/ui@4.
|
|
32
|
+
"@vitest/ui@4.1.2": {
|
|
43
33
|
"licenses": "MIT",
|
|
44
34
|
"repository": "https://github.com/vitest-dev/vitest",
|
|
45
|
-
"licenseUrl": "https://unpkg.com/@vitest/ui@4.
|
|
35
|
+
"licenseUrl": "https://unpkg.com/@vitest/ui@4.1.2/LICENSE"
|
|
46
36
|
},
|
|
47
|
-
"axe-core@4.
|
|
37
|
+
"axe-core@4.11.2": {
|
|
48
38
|
"licenses": "MPL-2.0",
|
|
49
39
|
"repository": "https://github.com/dequelabs/axe-core",
|
|
50
|
-
"licenseUrl": "https://unpkg.com/axe-core@4.
|
|
40
|
+
"licenseUrl": "https://unpkg.com/axe-core@4.11.2/LICENSE"
|
|
51
41
|
},
|
|
52
42
|
"cypress-axe@1.7.0": {
|
|
53
43
|
"licenses": "MIT",
|
|
54
44
|
"repository": "https://github.com/component-driven/cypress-axe",
|
|
55
45
|
"licenseUrl": "https://unpkg.com/cypress-axe@1.7.0/License.md"
|
|
56
46
|
},
|
|
57
|
-
"cypress@15.
|
|
47
|
+
"cypress@15.13.0": {
|
|
58
48
|
"licenses": "MIT",
|
|
59
49
|
"repository": "https://github.com/cypress-io/cypress",
|
|
60
50
|
"licenseUrl": "https://cypress.io"
|
|
61
51
|
},
|
|
62
|
-
"
|
|
63
|
-
"licenses": "MIT",
|
|
64
|
-
"repository": "https://github.com/evanw/esbuild",
|
|
65
|
-
"licenseUrl": "https://unpkg.com/esbuild@0.27.2/LICENSE.md"
|
|
66
|
-
},
|
|
67
|
-
"eslint-config-google@0.14.0": {
|
|
68
|
-
"licenses": "Apache-2.0",
|
|
69
|
-
"repository": "https://github.com/google/eslint-config-google",
|
|
70
|
-
"licenseUrl": "https://unpkg.com/eslint-config-google@0.14.0/LICENSE"
|
|
71
|
-
},
|
|
72
|
-
"eslint-config-prettier@10.1.8": {
|
|
73
|
-
"licenses": "MIT",
|
|
74
|
-
"repository": "https://github.com/prettier/eslint-config-prettier",
|
|
75
|
-
"licenseUrl": "https://unpkg.com/eslint-config-prettier@10.1.8/LICENSE"
|
|
76
|
-
},
|
|
77
|
-
"eslint@9.34.0": {
|
|
78
|
-
"licenses": "MIT",
|
|
79
|
-
"repository": "https://github.com/eslint/eslint",
|
|
80
|
-
"licenseUrl": "https://unpkg.com/eslint@9.34.0/LICENSE"
|
|
81
|
-
},
|
|
82
|
-
"github-markdown-css@5.8.1": {
|
|
52
|
+
"github-markdown-css@5.9.0": {
|
|
83
53
|
"licenses": "MIT",
|
|
84
54
|
"repository": "https://github.com/sindresorhus/github-markdown-css",
|
|
85
|
-
"licenseUrl": "https://unpkg.com/github-markdown-css@5.
|
|
55
|
+
"licenseUrl": "https://unpkg.com/github-markdown-css@5.9.0/license"
|
|
86
56
|
},
|
|
87
57
|
"highlight.js@11.11.1": {
|
|
88
58
|
"licenses": "BSD-3-Clause",
|
|
@@ -94,95 +64,75 @@
|
|
|
94
64
|
"repository": "https://github.com/davidparsson/junit-report-builder",
|
|
95
65
|
"licenseUrl": "https://unpkg.com/junit-report-builder@5.1.1/LICENSE"
|
|
96
66
|
},
|
|
97
|
-
"lint-staged@16.
|
|
67
|
+
"lint-staged@16.4.0": {
|
|
98
68
|
"licenses": "MIT",
|
|
99
69
|
"repository": "https://github.com/lint-staged/lint-staged",
|
|
100
|
-
"licenseUrl": "https://unpkg.com/lint-staged@16.
|
|
70
|
+
"licenseUrl": "https://unpkg.com/lint-staged@16.4.0/LICENSE"
|
|
101
71
|
},
|
|
102
|
-
"marked@
|
|
72
|
+
"marked@18.0.0": {
|
|
103
73
|
"licenses": "MIT",
|
|
104
74
|
"repository": "https://github.com/markedjs/marked",
|
|
105
|
-
"licenseUrl": "https://unpkg.com/marked@
|
|
75
|
+
"licenseUrl": "https://unpkg.com/marked@18.0.0/LICENSE.md"
|
|
106
76
|
},
|
|
107
|
-
"
|
|
77
|
+
"oxfmt@0.44.0": {
|
|
108
78
|
"licenses": "MIT",
|
|
109
|
-
"repository": "https://github.com/
|
|
110
|
-
"licenseUrl": "https://unpkg.com/
|
|
79
|
+
"repository": "https://github.com/oxc-project/oxc",
|
|
80
|
+
"licenseUrl": "https://unpkg.com/oxfmt@0.44.0/LICENSE"
|
|
111
81
|
},
|
|
112
|
-
"
|
|
82
|
+
"oxlint-tsgolint@0.20.0": {
|
|
113
83
|
"licenses": "MIT",
|
|
114
|
-
"repository": "https://github.com/
|
|
115
|
-
"licenseUrl": "https://unpkg.com/
|
|
84
|
+
"repository": "https://github.com/oxc-project/tsgolint",
|
|
85
|
+
"licenseUrl": "https://unpkg.com/oxlint-tsgolint@0.20.0/LICENSE"
|
|
116
86
|
},
|
|
117
|
-
"
|
|
87
|
+
"oxlint@1.59.0": {
|
|
118
88
|
"licenses": "MIT",
|
|
119
|
-
"repository": "https://github.com/
|
|
120
|
-
"licenseUrl": "https://unpkg.com/
|
|
89
|
+
"repository": "https://github.com/oxc-project/oxc",
|
|
90
|
+
"licenseUrl": "https://unpkg.com/oxlint@1.59.0/LICENSE"
|
|
121
91
|
},
|
|
122
|
-
"
|
|
123
|
-
"licenses": "MIT",
|
|
124
|
-
"repository": "https://github.com/sindresorhus/resolve-pkg",
|
|
125
|
-
"licenseUrl": "https://unpkg.com/resolve-pkg@2.0.0/license"
|
|
126
|
-
},
|
|
127
|
-
"sass@1.91.0": {
|
|
128
|
-
"licenses": "MIT",
|
|
129
|
-
"repository": "https://github.com/sass/dart-sass",
|
|
130
|
-
"licenseUrl": "https://unpkg.com/sass@1.91.0/LICENSE"
|
|
131
|
-
},
|
|
132
|
-
"stylelint-config-recommended-scss@16.0.0": {
|
|
92
|
+
"postcss-prefix-selector@2.1.1": {
|
|
133
93
|
"licenses": "MIT",
|
|
134
|
-
"repository": "https://github.com/
|
|
135
|
-
"licenseUrl": "https://unpkg.com/
|
|
94
|
+
"repository": "https://github.com/RadValentin/postcss-prefix-selector",
|
|
95
|
+
"licenseUrl": "https://unpkg.com/postcss-prefix-selector@2.1.1/LICENSE"
|
|
136
96
|
},
|
|
137
|
-
"
|
|
97
|
+
"postcss@8.5.8": {
|
|
138
98
|
"licenses": "MIT",
|
|
139
|
-
"repository": "https://github.com/
|
|
140
|
-
"licenseUrl": "https://unpkg.com/
|
|
99
|
+
"repository": "https://github.com/postcss/postcss",
|
|
100
|
+
"licenseUrl": "https://unpkg.com/postcss@8.5.8/LICENSE"
|
|
141
101
|
},
|
|
142
|
-
"
|
|
102
|
+
"resolve-pkg@3.0.1": {
|
|
143
103
|
"licenses": "MIT",
|
|
144
|
-
"repository": "https://github.com/
|
|
145
|
-
"licenseUrl": "https://unpkg.com/
|
|
104
|
+
"repository": "https://github.com/sindresorhus/resolve-pkg",
|
|
105
|
+
"licenseUrl": "https://unpkg.com/resolve-pkg@3.0.1/license"
|
|
146
106
|
},
|
|
147
|
-
"
|
|
107
|
+
"sass@1.99.0": {
|
|
148
108
|
"licenses": "MIT",
|
|
149
|
-
"repository": "https://github.com/
|
|
150
|
-
"licenseUrl": "https://unpkg.com/
|
|
109
|
+
"repository": "https://github.com/sass/dart-sass",
|
|
110
|
+
"licenseUrl": "https://unpkg.com/sass@1.99.0/LICENSE"
|
|
151
111
|
},
|
|
152
|
-
"
|
|
112
|
+
"tsdown@0.21.7": {
|
|
153
113
|
"licenses": "MIT",
|
|
154
|
-
"repository": "https://github.com/
|
|
155
|
-
"licenseUrl": "https://unpkg.com/
|
|
114
|
+
"repository": "https://github.com/rolldown/tsdown",
|
|
115
|
+
"licenseUrl": "https://unpkg.com/tsdown@0.21.7/LICENSE"
|
|
156
116
|
},
|
|
157
|
-
"turbo@2.
|
|
117
|
+
"turbo@2.9.4": {
|
|
158
118
|
"licenses": "MIT",
|
|
159
119
|
"repository": "https://github.com/vercel/turborepo",
|
|
160
|
-
"licenseUrl": "https://unpkg.com/turbo@2.
|
|
120
|
+
"licenseUrl": "https://unpkg.com/turbo@2.9.4/LICENSE"
|
|
161
121
|
},
|
|
162
|
-
"typescript
|
|
163
|
-
"licenses": "MIT",
|
|
164
|
-
"repository": "https://github.com/typescript-eslint/typescript-eslint",
|
|
165
|
-
"licenseUrl": "https://unpkg.com/typescript-eslint@8.41.0/LICENSE"
|
|
166
|
-
},
|
|
167
|
-
"typescript@5.9.3": {
|
|
122
|
+
"typescript@6.0.2": {
|
|
168
123
|
"licenses": "Apache-2.0",
|
|
169
124
|
"repository": "https://github.com/microsoft/TypeScript",
|
|
170
|
-
"licenseUrl": "https://unpkg.com/typescript@
|
|
171
|
-
},
|
|
172
|
-
"vite-tsconfig-paths@5.1.4": {
|
|
173
|
-
"licenses": "MIT",
|
|
174
|
-
"repository": "https://github.com/aleclarson/vite-tsconfig-paths",
|
|
175
|
-
"licenseUrl": "https://unpkg.com/vite-tsconfig-paths@5.1.4/LICENSE"
|
|
125
|
+
"licenseUrl": "https://unpkg.com/typescript@6.0.2/LICENSE.txt"
|
|
176
126
|
},
|
|
177
|
-
"vite@
|
|
127
|
+
"vite@8.0.5": {
|
|
178
128
|
"licenses": "MIT",
|
|
179
129
|
"repository": "https://github.com/vitejs/vite",
|
|
180
|
-
"licenseUrl": "https://unpkg.com/vite@
|
|
130
|
+
"licenseUrl": "https://unpkg.com/vite@8.0.5/LICENSE.md"
|
|
181
131
|
},
|
|
182
|
-
"vitest@4.
|
|
132
|
+
"vitest@4.1.2": {
|
|
183
133
|
"licenses": "MIT",
|
|
184
134
|
"repository": "https://github.com/vitest-dev/vitest",
|
|
185
|
-
"licenseUrl": "https://unpkg.com/vitest@4.
|
|
135
|
+
"licenseUrl": "https://unpkg.com/vitest@4.1.2/LICENSE.md"
|
|
186
136
|
},
|
|
187
137
|
"yargs@18.0.0": {
|
|
188
138
|
"licenses": "MIT",
|
package/package.json
CHANGED
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cas-smartdesign/button",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"description": "A button element which encloses the look and feel of the smartdesign button",
|
|
5
|
-
"main": "dist/button-with-externals.js",
|
|
6
|
-
"module": "dist/button.mjs",
|
|
7
|
-
"types": "dist/button.d.ts",
|
|
8
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
9
|
-
"dependencies": {
|
|
10
|
-
"@cas-smartdesign/element-base": "^5.2.0"
|
|
11
|
-
},
|
|
12
6
|
"files": [
|
|
13
7
|
"dist",
|
|
14
8
|
"npm-third-party-licenses.json"
|
|
15
9
|
],
|
|
10
|
+
"type": "module",
|
|
11
|
+
"main": "dist/button.mjs",
|
|
12
|
+
"module": "dist/button.mjs",
|
|
13
|
+
"types": "dist/button.d.ts",
|
|
16
14
|
"publishConfig": {
|
|
17
|
-
"
|
|
18
|
-
"
|
|
15
|
+
"access": "public",
|
|
16
|
+
"registry": "https://registry.npmjs.org/"
|
|
17
|
+
},
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@cas-smartdesign/element-base": "^6.0.0"
|
|
19
20
|
},
|
|
20
21
|
"devDependencies": {
|
|
21
|
-
"@cas-smartdesign/
|
|
22
|
-
"@cas-smartdesign/
|
|
22
|
+
"@cas-smartdesign/element-preview": "^1.0.0",
|
|
23
|
+
"@cas-smartdesign/license-generator": "^1.10.0"
|
|
23
24
|
},
|
|
24
25
|
"scripts": {
|
|
25
26
|
"version": "pnpm version",
|
package/readme.md
CHANGED
|
@@ -24,3 +24,5 @@ A button element which encloses the look and feel of the smartdesign button.
|
|
|
24
24
|
- Defines the value of margin-left, margin-right (default is 8px)
|
|
25
25
|
- `--sd-button-max-icon-size`
|
|
26
26
|
- Defines the value of max-width, max-height (default is 32px)
|
|
27
|
+
- `--sd-button-border-radius`
|
|
28
|
+
- Defines the border radius of the button
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
var window;(window||={})["@cas-smartdesign/button"]=(()=>{var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var m=(i,t)=>{for(var e in t)n(i,e,{get:t[e],enumerable:!0})},g=(i,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of b(t))!p.call(i,a)&&a!==e&&n(i,a,{get:()=>t[a],enumerable:!(s=u(t,a))||s.enumerable});return i};var y=i=>g(n({},"__esModule",{value:!0}),i);var x={};m(x,{Button:()=>o});var d=class r extends HTMLElement{memoizedTemplate(){let t=this.is();if(r.TEMPLATE_CACHE[t])return r.TEMPLATE_CACHE[t];let e=this.template();return window.ShadyCSS&&window.ShadyCSS.prepareTemplate(e,this.is()),r.TEMPLATE_CACHE[t]=e,e}connectedCallback(){let t=this.memoizedTemplate();window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.shadowRoot||(this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(document.importNode(t.content,!0)),requestAnimationFrame(()=>this.dispatchEvent(new CustomEvent("ready"))))}whenReady(t){this.shadowRoot?t():this.addEventListener("ready",()=>t())}};d.TEMPLATE_CACHE={};var c=d;var E=`<style>
|
|
2
|
-
:host {
|
|
3
|
-
contain: content;
|
|
4
|
-
background: rgba(20, 103, 186, 0);
|
|
5
|
-
color: #1467ba;
|
|
6
|
-
border: none;
|
|
7
|
-
outline: none;
|
|
8
|
-
padding: 0 8px;
|
|
9
|
-
height: 32px;
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
user-select: none;
|
|
12
|
-
display: inline-flex;
|
|
13
|
-
align-items: center;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
box-sizing: border-box;
|
|
16
|
-
vertical-align: middle;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:host(:focus),
|
|
20
|
-
:host(:not([disabled], [aria-disabled="true"]):hover) {
|
|
21
|
-
background: rgba(20, 103, 186, 0.1);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@media (forced-colors: active) {
|
|
25
|
-
:host(:not([disabled], [aria-disabled="true"]):focus-visible) {
|
|
26
|
-
outline: 1px solid;
|
|
27
|
-
}
|
|
28
|
-
:host {
|
|
29
|
-
margin: 1px;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
:host(:not([disabled], [aria-disabled="true"]):focus-visible) {
|
|
34
|
-
box-shadow: 0 0 0 1px #1467ba inset;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
:host(:not([disabled], [aria-disabled="true"]):active) {
|
|
38
|
-
background: rgba(20, 103, 186, 0.2);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:host([primary]) {
|
|
42
|
-
background: #1467ba;
|
|
43
|
-
color: #fff;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
:host([primary]:focus),
|
|
47
|
-
:host(:not([disabled], [aria-disabled="true"])[primary]:hover) {
|
|
48
|
-
background: #125da8;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
:host([primary]:focus-visible) {
|
|
52
|
-
box-shadow: 0 0 0 1px white inset;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
:host(:not([disabled], [aria-disabled="true"])[primary]:focus-visible) {
|
|
56
|
-
outline: 1px solid #1467ba;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
:host(:not([disabled], [aria-disabled="true"])[primary]:active) {
|
|
60
|
-
background: #0e4883;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
:host([disabled]),
|
|
64
|
-
:host([aria-disabled="true"]) {
|
|
65
|
-
filter: grayscale(100%);
|
|
66
|
-
opacity: 0.5;
|
|
67
|
-
cursor: default;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
:host([disabled]:focus-visible),
|
|
71
|
-
:host([aria-disabled="true"]:focus-visible) {
|
|
72
|
-
outline: 1px dashed #111;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.icon:not([src]),
|
|
76
|
-
.icon[src=""],
|
|
77
|
-
.icon[src="data:,"] {
|
|
78
|
-
display: none;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.content {
|
|
82
|
-
display: flex;
|
|
83
|
-
align-items: center;
|
|
84
|
-
min-width: 0px;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.content ::slotted(*) {
|
|
88
|
-
margin-left: var(--sd-button-content-padding, 8px);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.content ::slotted(*:last-child) {
|
|
92
|
-
margin-right: var(--sd-button-content-padding, 8px);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.icon {
|
|
96
|
-
max-height: var(--sd-button-max-icon-size, 32px);
|
|
97
|
-
max-width: var(--sd-button-max-icon-size, 32px);
|
|
98
|
-
}
|
|
99
|
-
</style>
|
|
100
|
-
<slot name="icon">
|
|
101
|
-
<img class="icon" src="data:," alt part="icon" />
|
|
102
|
-
</slot>
|
|
103
|
-
<div class="content">
|
|
104
|
-
<slot></slot>
|
|
105
|
-
</div>
|
|
106
|
-
`,l=class h extends c{constructor(){super(),this._isSpaceOrEnterKeyDown=!1,this.addEventListener("keydown",t=>{this.isSpaceOrEnter(t)&&(this._isSpaceOrEnterKeyDown=!0,t.preventDefault())}),this.addEventListener("keyup",t=>{this.isSpaceOrEnter(t)&&this._isSpaceOrEnterKeyDown==!0&&(this._isSpaceOrEnterKeyDown=!1,this.click())}),this.addEventListener("click",t=>{if(this.disabled||this.hasAttribute("disabled")){t.stopImmediatePropagation();return}let e=this.getAttribute("type")?.toLowerCase()?.trim();if(e!=="submit"&&e!=="reset")return;let s=this.closest("form");s&&e==="submit"&&s.requestSubmit(),s&&e==="reset"&&s.reset()},{capture:!0})}get imageElement(){return this._image}get icon(){return this.getAttribute("icon")}set icon(t){this.icon!==t&&(t?this.setAttribute("icon",t):this.removeAttribute("icon"),this.updateIcon())}get primary(){return this.hasAttribute("primary")}set primary(t){t?this.setAttribute("primary",""):this.removeAttribute("primary")}get disabled(){return this.getAttribute("aria-disabled")=="true"}set disabled(t){this.setAttribute("aria-disabled",t.toString())}static get observedAttributes(){return["icon"]}is(){return h.ID}template(){let t=document.createElement("template");return t.innerHTML=E,t}isSpaceOrEnter(t){switch(t.key){case" ":case"Space":case"Enter":return!0;default:return!1}}click(){!this.disabled&&!this.hasAttribute("disabled")&&super.click()}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabIndex")||(this.tabIndex=0),this._image=this.shadowRoot.querySelector(".icon"),this.updateIcon(),this.hasAttribute("role")||this.setAttribute("role","button")}attributeChangedCallback(){this.updateIcon()}updateIcon(){if(this._image){let t=this.getAttribute("icon");t&&(this._image.src=t)}}};l.ID="sd-button";var o=l;customElements.get(o.ID)||customElements.define(o.ID,o);return y(x);})();
|
|
107
|
-
//# sourceMappingURL=button-with-externals.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../element-base/element-base.ts", "../button.html", "../button.ts"],
|
|
4
|
-
"sourcesContent": ["export type IReadyEvent = void;\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n ready: CustomEvent<IReadyEvent>;\n}\n\nexport interface ElementBase {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport abstract class ElementBase extends HTMLElement {\n public abstract is(): string;\n\n protected abstract template(): HTMLTemplateElement;\n private static readonly TEMPLATE_CACHE: {\n [name: string]: HTMLTemplateElement;\n } = {};\n private memoizedTemplate(): HTMLTemplateElement {\n const is = this.is();\n if (ElementBase.TEMPLATE_CACHE[is]) {\n return ElementBase.TEMPLATE_CACHE[is];\n }\n const template = this.template();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.prepareTemplate(template, this.is());\n }\n ElementBase.TEMPLATE_CACHE[is] = template;\n return template;\n }\n\n public connectedCallback() {\n const template = this.memoizedTemplate();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.styleElement(this);\n }\n if (!this.shadowRoot) {\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.appendChild(document.importNode(template.content, true));\n requestAnimationFrame(() => this.dispatchEvent(new CustomEvent<IReadyEvent>(\"ready\")));\n }\n }\n\n public whenReady(actor: () => void) {\n if (this.shadowRoot) {\n actor();\n } else {\n this.addEventListener(\"ready\", () => actor());\n }\n }\n}\n", "export default \"<style>\\n\\t:host {\\n\\t\\tcontain: content;\\n\\t\\tbackground: rgba(20, 103, 186, 0);\\n\\t\\tcolor: #1467ba;\\n\\t\\tborder: none;\\n\\t\\toutline: none;\\n\\t\\tpadding: 0 8px;\\n\\t\\theight: 32px;\\n\\t\\tcursor: pointer;\\n\\t\\tuser-select: none;\\n\\t\\tdisplay: inline-flex;\\n\\t\\talign-items: center;\\n\\t\\tjustify-content: center;\\n\\t\\tbox-sizing: border-box;\\n\\t\\tvertical-align: middle;\\n\\t}\\n\\n\\t:host(:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):hover) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.1);\\n\\t}\\n\\n\\t@media (forced-colors: active) {\\n\\t\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\t\\toutline: 1px solid;\\n\\t\\t}\\n\\t\\t:host {\\n\\t\\t\\tmargin: 1px;\\n\\t\\t}\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px #1467ba inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):active) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.2);\\n\\t}\\n\\n\\t:host([primary]) {\\n\\t\\tbackground: #1467ba;\\n\\t\\tcolor: #fff;\\n\\t}\\n\\n\\t:host([primary]:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:hover) {\\n\\t\\tbackground: #125da8;\\n\\t}\\n\\n\\t:host([primary]:focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px white inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:focus-visible) {\\n\\t\\toutline: 1px solid #1467ba;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:active) {\\n\\t\\tbackground: #0e4883;\\n\\t}\\n\\n\\t:host([disabled]),\\n\\t:host([aria-disabled=\\\"true\\\"]) {\\n\\t\\tfilter: grayscale(100%);\\n\\t\\topacity: 0.5;\\n\\t\\tcursor: default;\\n\\t}\\n\\n\\t:host([disabled]:focus-visible),\\n\\t:host([aria-disabled=\\\"true\\\"]:focus-visible) {\\n\\t\\toutline: 1px dashed #111;\\n\\t}\\n\\n\\t.icon:not([src]),\\n\\t.icon[src=\\\"\\\"],\\n\\t.icon[src=\\\"data:,\\\"] {\\n\\t\\tdisplay: none;\\n\\t}\\n\\n\\t.content {\\n\\t\\tdisplay: flex;\\n\\t\\talign-items: center;\\n\\t\\tmin-width: 0px;\\n\\t}\\n\\n\\t.content ::slotted(*) {\\n\\t\\tmargin-left: var(--sd-button-content-padding, 8px);\\n\\t}\\n\\n\\t.content ::slotted(*:last-child) {\\n\\t\\tmargin-right: var(--sd-button-content-padding, 8px);\\n\\t}\\n\\n\\t.icon {\\n\\t\\tmax-height: var(--sd-button-max-icon-size, 32px);\\n\\t\\tmax-width: var(--sd-button-max-icon-size, 32px);\\n\\t}\\n</style>\\n<slot name=\\\"icon\\\">\\n\\t<img class=\\\"icon\\\" src=\\\"data:,\\\" alt part=\\\"icon\\\" />\\n</slot>\\n<div class=\\\"content\\\">\\n\\t<slot></slot>\\n</div>\\n\"", "import { ElementBase } from \"@cas-smartdesign/element-base\";\n\nimport { default as htmlTemplate } from \"./button.html?raw\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Button.ID]: Button;\n }\n}\n\nexport class Button extends ElementBase {\n public static readonly ID = \"sd-button\";\n private _image: HTMLImageElement;\n private _isSpaceOrEnterKeyDown = false;\n\n public get imageElement() {\n return this._image;\n }\n\n public get icon(): string {\n return this.getAttribute(\"icon\");\n }\n\n public set icon(icon: string) {\n if (this.icon !== icon) {\n if (icon) {\n this.setAttribute(\"icon\", icon);\n } else {\n this.removeAttribute(\"icon\");\n }\n this.updateIcon();\n }\n }\n\n public get primary(): boolean {\n return this.hasAttribute(\"primary\");\n }\n\n public set primary(primary: boolean) {\n if (primary) {\n this.setAttribute(\"primary\", \"\");\n } else {\n this.removeAttribute(\"primary\");\n }\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n static get observedAttributes() {\n return [\"icon\"];\n }\n\n public is(): string {\n return Button.ID;\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n constructor() {\n super();\n this.addEventListener(\"keydown\", (e) => {\n if (this.isSpaceOrEnter(e)) {\n this._isSpaceOrEnterKeyDown = true;\n e.preventDefault(); // prevent potential scroll-down triggered by space\n }\n });\n this.addEventListener(\"keyup\", (e) => {\n if (this.isSpaceOrEnter(e) && this._isSpaceOrEnterKeyDown == true) {\n this._isSpaceOrEnterKeyDown = false;\n this.click();\n }\n });\n // As Button is not an input element, click is fired even in disabled state\n this.addEventListener(\n \"click\",\n (event) => {\n if (this.disabled || this.hasAttribute(\"disabled\")) {\n event.stopImmediatePropagation();\n return;\n }\n\n const type = this.getAttribute(\"type\")?.toLowerCase()?.trim();\n\n if (type !== \"submit\" && type !== \"reset\") {\n return;\n }\n\n const form = this.closest(\"form\");\n\n if (form && type === \"submit\") {\n form.requestSubmit();\n }\n\n if (form && type === \"reset\") {\n form.reset();\n }\n },\n { capture: true },\n );\n }\n\n private isSpaceOrEnter(event: KeyboardEvent): boolean {\n switch (event.key) {\n case \" \":\n case \"Space\":\n case \"Enter\":\n return true;\n default:\n return false;\n }\n }\n\n public click() {\n if (!this.disabled && !this.hasAttribute(\"disabled\")) {\n super.click();\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n\n this._image = this.shadowRoot.querySelector(\".icon\") as HTMLImageElement;\n\n this.updateIcon();\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"button\");\n }\n }\n\n public attributeChangedCallback(): void {\n this.updateIcon();\n }\n\n private updateIcon() {\n if (this._image) {\n const iconSrc = this.getAttribute(\"icon\");\n if (iconSrc) {\n this._image.src = iconSrc;\n }\n }\n }\n}\n\nif (!customElements.get(Button.ID)) {\n customElements.define(Button.ID, Button);\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["_ElementBase", "is", "template", "actor", "ElementBase", "htmlTemplate", "_Button", "ElementBase", "e", "event", "type", "form", "icon", "primary", "disabled", "template", "iconSrc", "Button"]
|
|
7
|
-
}
|