@ni/nimble-components 32.2.10 → 32.3.0

package/dist/esm/radio-group/index.d.ts

@@ -1,5 +1,6 @@
 import { RadioGroup as FoundationRadioGroup } from '@microsoft/fast-foundation';
 import { Orientation } from '@microsoft/fast-web-utilities';
+import type { ErrorPattern } from '../patterns/error/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-radio-group': RadioGroup;
@@ -9,6 +10,8 @@ export { Orientation };
 /**
  * A nimble-styled grouping element for radio buttons
  */
-export declare class RadioGroup extends FoundationRadioGroup {
+export declare class RadioGroup extends FoundationRadioGroup implements ErrorPattern {
+    errorText?: string;
+    errorVisible: boolean;
 }
 export declare const radioGroupTag = "nimble-radio-group";

package/dist/esm/radio-group/index.js

@@ -1,12 +1,25 @@
-import { RadioGroup as FoundationRadioGroup, radioGroupTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
+import { __decorate } from "tslib";
+import { RadioGroup as FoundationRadioGroup, DesignSystem } from '@microsoft/fast-foundation';
 import { Orientation } from '@microsoft/fast-web-utilities';
+import { attr } from '@microsoft/fast-element';
 import { styles } from './styles';
+import { template } from './template';
 export { Orientation };
 /**
  * A nimble-styled grouping element for radio buttons
  */
 export class RadioGroup extends FoundationRadioGroup {
+    constructor() {
+        super(...arguments);
+        this.errorVisible = false;
+    }
 }
+__decorate([
+    attr({ attribute: 'error-text' })
+], RadioGroup.prototype, "errorText", void 0);
+__decorate([
+    attr({ attribute: 'error-visible', mode: 'boolean' })
+], RadioGroup.prototype, "errorVisible", void 0);
 const nimbleRadioGroup = RadioGroup.compose({
     baseName: 'radio-group',
     baseClass: FoundationRadioGroup,

package/dist/esm/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,IAAI,oBAAoB,EAClC,kBAAkB,IAAI,QAAQ,EAC9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;CAAG;AAEvD,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,oBAAoB;IAC/B,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,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    RadioGroup as FoundationRadioGroup,\n    radioGroupTemplate as template,\n    DesignSystem\n} from '@microsoft/fast-foundation';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport { styles } from './styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-radio-group': RadioGroup;\n    }\n}\n\nexport { Orientation };\n\n/**\n * A nimble-styled grouping element for radio buttons\n */\nexport class RadioGroup extends FoundationRadioGroup {}\n\nconst nimbleRadioGroup = RadioGroup.compose({\n    baseName: 'radio-group',\n    baseClass: FoundationRadioGroup,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());\nexport const radioGroupTag = 'nimble-radio-group';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,UAAU,IAAI,oBAAoB,EAClC,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;IAApD;;QAKW,iBAAY,GAAG,KAAK,CAAC;IAChC,CAAC;CAAA;AAJU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CACR;AAGnB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC1B;AAGhC,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,SAAS,EAAE,oBAAoB;IAC/B,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,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import {\n    RadioGroup as FoundationRadioGroup,\n    DesignSystem\n} from '@microsoft/fast-foundation';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport { attr } from '@microsoft/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { ErrorPattern } from '../patterns/error/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-radio-group': RadioGroup;\n    }\n}\n\nexport { Orientation };\n\n/**\n * A nimble-styled grouping element for radio buttons\n */\nexport class RadioGroup extends FoundationRadioGroup implements ErrorPattern {\n    @attr({ attribute: 'error-text' })\n    public errorText?: string;\n\n    @attr({ attribute: 'error-visible', mode: 'boolean' })\n    public errorVisible = false;\n}\n\nconst nimbleRadioGroup = RadioGroup.compose({\n    baseName: 'radio-group',\n    baseClass: FoundationRadioGroup,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());\nexport const radioGroupTag = 'nimble-radio-group';\n"]}

package/dist/esm/radio-group/styles.js

@@ -1,12 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../utilities/style/display';
-import { controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, standardPadding } from '../theme-provider/design-tokens';
+import { controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, controlLabelFontLineHeight, smallPadding, standardPadding } from '../theme-provider/design-tokens';
+import { styles as errorStyles } from '../patterns/error/styles';
 export const styles = css `
     ${display('inline-block')}
+    ${errorStyles}
 
     .positioning-region {
         display: flex;
         gap: ${standardPadding};
+        position: relative;
     }
 
     :host([orientation='vertical']) .positioning-region {
@@ -17,6 +20,13 @@ export const styles = css `
         flex-direction: row;
     }
 
+    .label-container {
+        display: flex;
+        height: ${controlLabelFontLineHeight};
+        gap: ${smallPadding};
+        margin-bottom: ${smallPadding};
+    }
+
     slot[name='label'] {
         font: ${controlLabelFont};
         color: ${controlLabelFontColor};
@@ -25,5 +35,10 @@ export const styles = css `
     :host([disabled]) slot[name='label'] {
         color: ${controlLabelDisabledFontColor};
     }
+
+    .error-icon {
+        margin-left: auto;
+        margin-right: ${smallPadding};
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/radio-group/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;eAId,eAAe;;;;;;;;;;;;gBAYd,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;CAE7C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    .positioning-region {\n        display: flex;\n        gap: ${standardPadding};\n    }\n\n    :host([orientation='vertical']) .positioning-region {\n        flex-direction: column;\n    }\n\n    :host([orientation='horizontal']) .positioning-region {\n        flex-direction: row;\n    }\n\n    slot[name='label'] {\n        font: ${controlLabelFont};\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) slot[name='label'] {\n        color: ${controlLabelDisabledFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;;eAIF,eAAe;;;;;;;;;;;;;;kBAcZ,0BAA0B;eAC7B,YAAY;yBACF,YAAY;;;;gBAIrB,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;;;;wBAKtB,YAAY;;CAEnC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    controlLabelFontLineHeight,\n    smallPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../patterns/error/styles';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n\n    .positioning-region {\n        display: flex;\n        gap: ${standardPadding};\n        position: relative;\n    }\n\n    :host([orientation='vertical']) .positioning-region {\n        flex-direction: column;\n    }\n\n    :host([orientation='horizontal']) .positioning-region {\n        flex-direction: row;\n    }\n\n    .label-container {\n        display: flex;\n        height: ${controlLabelFontLineHeight};\n        gap: ${smallPadding};\n        margin-bottom: ${smallPadding};\n    }\n\n    slot[name='label'] {\n        font: ${controlLabelFont};\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) slot[name='label'] {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .error-icon {\n        margin-left: auto;\n        margin-right: ${smallPadding};\n    }\n`;\n"]}

package/dist/esm/radio-group/template.d.ts

@@ -0,0 +1,2 @@
+import type { RadioGroup } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<RadioGroup, any>;

package/dist/esm/radio-group/template.js

@@ -0,0 +1,36 @@
+import { elements, html, slotted } from '@microsoft/fast-element';
+import { Orientation } from '@microsoft/fast-web-utilities';
+import { errorTextTemplate } from '../patterns/error/template';
+import { iconExclamationMarkTag } from '../icons/exclamation-mark';
+/* eslint-disable @typescript-eslint/indent */
+export const template = html `
+    <template
+        role="radiogroup"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @focusout="${(x, c) => x.focusOutHandler(c.event)}"
+    >
+        <div class="label-container">
+            <slot name="label"></slot>            
+            <${iconExclamationMarkTag}
+                severity="error"
+                class="error-icon"
+            ></${iconExclamationMarkTag}>
+        </div>
+        <div
+            class="positioning-region ${x => (x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical')}"
+            part="positioning-region"
+        >
+            <slot
+                ${slotted({
+    property: 'slottedRadioButtons',
+    filter: elements('[role=radio]')
+})}
+            ></slot>
+            ${errorTextTemplate}
+        </div>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/radio-group/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/radio-group/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,8CAA8C;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;;yBAGf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACtB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;qBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;eAIxD,sBAAsB;;;iBAGpB,sBAAsB;;;wCAGC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;;;;kBAIjG,OAAO,CAAC;IACN,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC;CACnC,CAAC;;cAEJ,iBAAiB;;;CAG9B,CAAC","sourcesContent":["import { elements, html, slotted } from '@microsoft/fast-element';\nimport { Orientation } from '@microsoft/fast-web-utilities';\nimport type { RadioGroup } from '.';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\n\n/* eslint-disable @typescript-eslint/indent */\nexport const template = html<RadioGroup>`\n    <template\n        role=\"radiogroup\"\n        aria-disabled=\"${x => x.disabled}\"\n        aria-readonly=\"${x => x.readOnly}\"\n        @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n        @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n        @focusout=\"${(x, c) => x.focusOutHandler(c.event as FocusEvent)}\"\n    >\n        <div class=\"label-container\">\n            <slot name=\"label\"></slot>            \n            <${iconExclamationMarkTag}\n                severity=\"error\"\n                class=\"error-icon\"\n            ></${iconExclamationMarkTag}>\n        </div>\n        <div\n            class=\"positioning-region ${x => (x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical')}\"\n            part=\"positioning-region\"\n        >\n            <slot\n                ${slotted({\n                    property: 'slottedRadioButtons',\n                    filter: elements('[role=radio]')\n                })}\n            ></slot>\n            ${errorTextTemplate}\n        </div>\n    </template>\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "32.2.10",
+  "version": "32.3.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",