@ni/nimble-components 7.1.1 → 7.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/nimble-components/src/toggle-button/template.d.ts +3 -1
- package/dist/esm/patterns/button/styles.js +12 -6
- package/dist/esm/patterns/button/styles.js.map +1 -1
- package/dist/esm/toggle-button/index.js +2 -1
- package/dist/esm/toggle-button/index.js.map +1 -1
- package/dist/esm/toggle-button/template.d.ts +3 -1
- package/dist/esm/toggle-button/template.js +4 -4
- package/dist/esm/toggle-button/template.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import { FoundationElementTemplate, ButtonOptions } from '@microsoft/fast-foundation';
|
|
1
3
|
import type { ToggleButton } from '.';
|
|
2
|
-
export declare const template:
|
|
4
|
+
export declare const template: FoundationElementTemplate<ViewTemplate<ToggleButton>, ButtonOptions>;
|
|
@@ -32,8 +32,8 @@ export const styles = css `
|
|
|
32
32
|
|
|
33
33
|
.control {
|
|
34
34
|
background-color: transparent;
|
|
35
|
-
height:
|
|
36
|
-
width:
|
|
35
|
+
height: 100%;
|
|
36
|
+
width: 100%;
|
|
37
37
|
border: ${borderWidth} solid transparent;
|
|
38
38
|
box-sizing: border-box;
|
|
39
39
|
color: inherit;
|
|
@@ -108,9 +108,6 @@ export const styles = css `
|
|
|
108
108
|
|
|
109
109
|
[part='start'] {
|
|
110
110
|
display: contents;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
slot[name='start']::slotted(*) {
|
|
114
111
|
${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
|
|
115
112
|
}
|
|
116
113
|
|
|
@@ -119,6 +116,11 @@ export const styles = css `
|
|
|
119
116
|
}
|
|
120
117
|
|
|
121
118
|
[part='end'] {
|
|
119
|
+
display: contents;
|
|
120
|
+
${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:host([content-hidden]) [part='end'] {
|
|
122
124
|
display: none;
|
|
123
125
|
}
|
|
124
126
|
`
|
|
@@ -180,7 +182,7 @@ export const styles = css `
|
|
|
180
182
|
}
|
|
181
183
|
|
|
182
184
|
.control:hover {
|
|
183
|
-
background-color:
|
|
185
|
+
background-color: transparent;
|
|
184
186
|
border-color: ${borderHoverColor};
|
|
185
187
|
}
|
|
186
188
|
|
|
@@ -189,6 +191,10 @@ export const styles = css `
|
|
|
189
191
|
border-color: ${borderHoverColor};
|
|
190
192
|
}
|
|
191
193
|
|
|
194
|
+
.control${focusVisible}:hover {
|
|
195
|
+
background-color: transparent;
|
|
196
|
+
}
|
|
197
|
+
|
|
192
198
|
.control:active {
|
|
193
199
|
background-color: ${fillSelectedColor};
|
|
194
200
|
border-color: ${fillSelectedColor};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,oBAAoB;gBACrB,eAAe;;;;;UAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,4BAA4B;;;;;;;;kBAQ3B,WAAW;;;;;;;;;;;;;qBAaR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;UAmB9C;AACE;;;;GAIG;AACH,EACJ
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,oBAAoB;gBACrB,eAAe;;;;;UAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,4BAA4B;;;;;;;;kBAQ3B,WAAW;;;;;;;;;;;;;qBAaR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;UAmB9C;AACE;;;;GAIG;AACH,EACJ;;;;;;;;;;;;;;UAcE,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;UASpD,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;CAM7D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;yCAKZ,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;;;aAOxC,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;;oCAM9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;;;;;wCAKE,iBAAiB;oCACrB,iBAAiB;;;;6CAIR,qBAAqB;;;aAGrD,CACJ,CACJ,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr } from '@microsoft/fast-element';
|
|
3
|
-
import { DesignSystem, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
|
|
3
|
+
import { applyMixins, DesignSystem, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { template } from './template';
|
|
6
6
|
import { ButtonAppearance } from '../patterns/button/types';
|
|
@@ -36,6 +36,7 @@ __decorate([
|
|
|
36
36
|
__decorate([
|
|
37
37
|
attr({ attribute: 'content-hidden', mode: 'boolean' })
|
|
38
38
|
], ToggleButton.prototype, "contentHidden", void 0);
|
|
39
|
+
applyMixins(ToggleButton, StartEnd);
|
|
39
40
|
const nimbleToggleButton = ToggleButton.compose({
|
|
40
41
|
baseName: 'toggle-button',
|
|
41
42
|
template,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EAEX,YAAY,EACZ,QAAQ,EACR,MAAM,IAAI,gBAAgB,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAU5D;;GAEG;AACH,MAAM,YAAa,SAAQ,gBAAgB;IAA3C;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAIjC,CAAC;CAAA;AAhBG;IADC,IAAI;gDAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;AAEpC,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC"}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import { FoundationElementTemplate, ButtonOptions } from '@microsoft/fast-foundation';
|
|
1
3
|
import type { ToggleButton } from '.';
|
|
2
|
-
export declare const template:
|
|
4
|
+
export declare const template: FoundationElementTemplate<ViewTemplate<ToggleButton>, ButtonOptions>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { html, ref } from '@microsoft/fast-element';
|
|
2
|
-
|
|
2
|
+
import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
export const template = (context, definition) => html `
|
|
3
4
|
<div
|
|
4
5
|
role="button"
|
|
5
6
|
part="control"
|
|
@@ -13,12 +14,11 @@ export const template = html `
|
|
|
13
14
|
?disabled="${x => x.disabled}"
|
|
14
15
|
${ref('control')}
|
|
15
16
|
>
|
|
16
|
-
|
|
17
|
-
<slot name="start"></slot>
|
|
18
|
-
</span>
|
|
17
|
+
${startSlotTemplate(context, definition)}
|
|
19
18
|
<span class="content" part="content">
|
|
20
19
|
<slot></slot>
|
|
21
20
|
</span>
|
|
21
|
+
${endSlotTemplate(context, definition)}
|
|
22
22
|
</div>
|
|
23
23
|
`;
|
|
24
24
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/toggle-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/toggle-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACH,eAAe,EACf,iBAAiB,EAGpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAc;;;;wBAIvB,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBAC7B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBAC/B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;yBACxC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;qBACrD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,GAAG,CAAC,SAAS,CAAC;;UAEd,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;UAItC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.2.2",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run generate-scss && npm run build-storybook",
|