@ni/nimble-components 1.0.0-beta.123 → 1.0.0-beta.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/esm/button/index.d.ts +11 -2
  2. package/dist/esm/button/index.js +20 -12
  3. package/dist/esm/button/index.js.map +1 -1
  4. package/dist/esm/button/styles.js +5 -1
  5. package/dist/esm/button/styles.js.map +1 -1
  6. package/dist/esm/nimble-components/src/button/index.d.ts +11 -2
  7. package/package.json +1 -1
package/dist/esm/button/index.d.ts CHANGED
@@ -18,7 +18,16 @@ declare class Button extends FoundationButton {
18
18
  * HTML Attribute: appearance
19
19
  */
20
20
  appearance: ButtonAppearance;
21
+ /**
22
+ * Specify as 'true' to hide the text content of the button. The button will
23
+ * become square, and the text content will be used as the label of the button
24
+ * for accessibility purposes.
25
+ *
26
+ * @public
27
+ * @remarks
28
+ * HTML Attribute: content-hidden
29
+ */
30
+ contentHidden: boolean;
31
+ private readonly contentId;
21
32
  connectedCallback(): void;
22
- defaultSlottedContentChanged(): void;
23
- private checkForEmptyText;
24
33
  }
package/dist/esm/button/index.js CHANGED
@@ -7,28 +7,36 @@ import { ButtonAppearance } from './types';
7
7
  * A nimble-styled HTML button
8
8
  */
9
9
  class Button extends FoundationButton {
10
+ constructor() {
11
+ super(...arguments);
12
+ /**
13
+ * Specify as 'true' to hide the text content of the button. The button will
14
+ * become square, and the text content will be used as the label of the button
15
+ * for accessibility purposes.
16
+ *
17
+ * @public
18
+ * @remarks
19
+ * HTML Attribute: content-hidden
20
+ */
21
+ this.contentHidden = false;
22
+ this.contentId = 'nimble-button-content';
23
+ }
10
24
  connectedCallback() {
11
25
  super.connectedCallback();
12
26
  if (!this.appearance) {
13
27
  this.appearance = ButtonAppearance.Outline;
14
28
  }
15
- }
16
- defaultSlottedContentChanged() {
17
- this.checkForEmptyText();
18
- }
19
- checkForEmptyText() {
20
- const hasTextContent = this.defaultSlottedContent.some(x => (x.textContent ?? '').trim().length !== 0);
21
- if (hasTextContent) {
22
- this.control.classList.remove('empty-text');
23
- }
24
- else {
25
- this.control.classList.add('empty-text');
26
- }
29
+ const content = this.control.querySelector('.content');
30
+ content.id = this.contentId;
31
+ this.control.setAttribute('aria-labelledby', this.contentId);
27
32
  }
28
33
  }
29
34
  __decorate([
30
35
  attr
31
36
  ], Button.prototype, "appearance", void 0);
37
+ __decorate([
38
+ attr({ attribute: 'content-hidden', mode: 'boolean' })
39
+ ], Button.prototype, "contentHidden", void 0);
32
40
  /**
33
41
  * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
34
42
  * Implements {@link @microsoft/fast-foundation#buttonTemplate}
package/dist/esm/button/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAW1B,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;IACL,CAAC;IAEM,4BAA4B;QAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEO,iBAAiB;QACrB,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAClD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CACjD,CAAC;QACF,IAAI,cAAc,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;SAC/C;aAAM;YACH,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;SAC5C;IACL,CAAC;CACJ;AAvBG;IADC,IAAI;0CACgC;AAyBzC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,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,YAAY,EAAE,CAAC,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,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,YAAY,EAAE,CAAC,CAAC"}
package/dist/esm/button/styles.js CHANGED
@@ -52,7 +52,7 @@ export const styles = css `
52
52
  transition: box-shadow ${smallDelay};
53
53
  }
54
54
 
55
- .control.empty-text {
55
+ :host([content-hidden]) .control {
56
56
  width: ${controlHeight};
57
57
  padding: 0px;
58
58
  }
@@ -88,6 +88,10 @@ export const styles = css `
88
88
  display: contents;
89
89
  }
90
90
 
91
+ :host([content-hidden]) .content {
92
+ display: none;
93
+ }
94
+
91
95
  [part='start'] {
92
96
  display: contents;
93
97
  }
package/dist/esm/button/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/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,0BAA0B,CAAC;AACxD,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;EAGE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;wBAuBhC,sBAAsB;;;;;;;;;;CAU7C;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,cAAc;;;;;oCAKnB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,cAAc;;aAE1C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,cAAc;;;;;6CAKd,cAAc;oCACvB,gBAAgB;;;0BAG1B,YAAY;6CACO,cAAc;oCACvB,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,cAAc;yCAClB,cAAc;;aAE1C,CACJ,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/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,0BAA0B,CAAC;AACxD,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;EAGE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2BhC,sBAAsB;;;;;;;;;;CAU7C;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,cAAc;;;;;oCAKnB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,cAAc;;aAE1C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,cAAc;;;;;6CAKd,cAAc;oCACvB,gBAAgB;;;0BAG1B,YAAY;6CACO,cAAc;oCACvB,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,cAAc;yCAClB,cAAc;;aAE1C,CACJ,CACJ,CAAC"}
package/dist/esm/nimble-components/src/button/index.d.ts CHANGED
@@ -18,7 +18,16 @@ declare class Button extends FoundationButton {
18
18
  * HTML Attribute: appearance
19
19
  */
20
20
  appearance: ButtonAppearance;
21
+ /**
22
+ * Specify as 'true' to hide the text content of the button. The button will
23
+ * become square, and the text content will be used as the label of the button
24
+ * for accessibility purposes.
25
+ *
26
+ * @public
27
+ * @remarks
28
+ * HTML Attribute: content-hidden
29
+ */
30
+ contentHidden: boolean;
31
+ private readonly contentId;
21
32
  connectedCallback(): void;
22
- defaultSlottedContentChanged(): void;
23
- private checkForEmptyText;
24
33
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "1.0.0-beta.123",
3
+ "version": "1.0.0-beta.124",
4
4
  "description": "Styled web components for the NI Nimble Design System",
5
5
  "scripts": {
6
6
  "build": "npm run build-components && npm run build-storybook",