@ni/nimble-components 7.0.1 → 7.1.0

package/dist/esm/nimble-components/src/switch/index.d.ts

@@ -0,0 +1,12 @@
+import { Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+export type { Switch };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-switch': Switch;
+    }
+}
+/**
+ * A nimble-styled switch control.
+ */
+declare class Switch extends FoundationSwitch {
+}

package/dist/esm/nimble-components/src/switch/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/switch/template.d.ts

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

package/dist/esm/switch/index.d.ts

@@ -0,0 +1,12 @@
+import { Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+export type { Switch };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-switch': Switch;
+    }
+}
+/**
+ * A nimble-styled switch control.
+ */
+declare class Switch extends FoundationSwitch {
+}

package/dist/esm/switch/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A nimble-styled switch control.
+ */
+class Switch extends FoundationSwitch {
+}
+const nimbleSwitch = Switch.compose({
+    baseClass: FoundationSwitch,
+    baseName: 'switch',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
+//# sourceMappingURL=index.js.map

package/dist/esm/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;CAAG;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/switch/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/switch/styles.js

@@ -0,0 +1,174 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { Black15, Black7, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, fillHoverColor, smallDelay } from '../theme-provider/design-tokens';
+import { hexToRgbaCssColor } from '../utilities/style/colors';
+import { focusVisible } from '../utilities/style/focus';
+import { themeBehavior } from '../utilities/style/theme';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        outline: none;
+        font: ${buttonLabelFont};
+        color: ${buttonLabelFontColor};
+        flex-direction: column;
+        cursor: pointer;
+        --ni-private-switch-height: 24px;
+        --ni-private-switch-indicator-size: 16px;
+        padding-bottom: calc(
+            ${controlHeight} - var(--ni-private-switch-height)
+        );
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${buttonLabelDisabledFontColor};
+    }
+
+    .label {
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
+    }
+
+    :host([disabled]) .label {
+        color: ${controlLabelDisabledFontColor};
+    }
+
+    .label__hidden {
+        display: none;
+        visibility: hidden;
+    }
+
+    .switch-container {
+        display: flex;
+        align-items: center;
+    }
+
+    slot[name='unchecked-message']::slotted(*) {
+        margin-inline-end: 8px;
+    }
+
+    .switch {
+        display: flex;
+        height: var(--ni-private-switch-height);
+        width: calc(var(--ni-private-switch-height) * 2);
+        box-sizing: border-box;
+        background-color: ${fillHoverColor};
+        border-radius: calc(var(--ni-private-switch-height) / 2);
+        align-items: center;
+        border: calc(${borderWidth} * 2) solid transparent;
+    }
+
+    :host([disabled]) .switch {
+        background-color: var(--ni-private-switch-background-disabled-color);
+    }
+
+    :host(${focusVisible}) .switch {
+        border-color: ${borderHoverColor};
+    }
+
+    .checked-indicator-spacer {
+        flex-grow: 0;
+        transition: flex-grow ${smallDelay} ease-in-out;
+    }
+
+    :host([aria-checked='true']) .checked-indicator-spacer {
+        flex-grow: 1;
+        transition: flex-grow ${smallDelay} ease-in-out;
+    }
+
+    .checked-indicator {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--ni-private-switch-indicator-background-color);
+        box-sizing: border-box;
+        width: var(--ni-private-switch-indicator-size);
+        height: var(--ni-private-switch-indicator-size);
+        border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
+        margin: calc(
+            calc(
+                    var(--ni-private-switch-height) -
+                        var(--ni-private-switch-indicator-size)
+                ) / 2
+        );
+        border: ${borderWidth} solid
+            var(--ni-private-switch-indicator-border-color);
+    }
+
+    :host(:hover) .checked-indicator {
+        border: calc(${borderWidth} * 2) solid ${borderHoverColor};
+    }
+
+    :host([disabled]) .checked-indicator {
+        background-color: var(
+            --ni-private-switch-indicator-background-disabled-color
+        );
+        border: ${borderWidth} solid
+            var(--ni-private-switch-indicator-border-disabled-color);
+    }
+
+    :host(${focusVisible}) .checked-indicator {
+        border: ${borderWidth} solid ${borderHoverColor};
+    }
+
+    .checked-indicator-inner {
+        width: calc(var(--ni-private-switch-indicator-size) / 2);
+        height: calc(var(--ni-private-switch-indicator-size) / 2);
+        border-radius: calc(var(--ni-private-switch-indicator-size) / 4);
+        background-color: var(--ni-private-switch-indicator-border-color);
+        opacity: 0;
+        transition: opacity ${smallDelay} ease-in-out;
+    }
+
+    :host([disabled]) .checked-indicator-inner {
+        background-color: var(
+            --ni-private-switch-indicator-border-disabled-color
+        );
+    }
+
+    :host([aria-checked='true']) .checked-indicator-inner {
+        opacity: 1;
+        transition: opacity ${smallDelay} ease-in-out;
+    }
+
+    slot[name='checked-message']::slotted(*) {
+        margin-inline-start: 8px;
+    }
+
+    @media (prefers-reduced-motion) {
+        .checked-indicator-inner,
+        .checked-indicator-spacer {
+            transition-duration: 0s;
+        }
+    }
+`.withBehaviors(themeBehavior(css `
+            ${'' /* Light theme */}
+            :host {
+                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.07)};
+                --ni-private-switch-indicator-background-color: ${White};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
+                --ni-private-switch-indicator-border-color: ${Black91};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.3)};
+            }
+        `, css `
+            ${'' /* Dark theme */}
+            :host {
+                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.07)};
+                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(Black91, 0.3)};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.1)};
+                --ni-private-switch-indicator-border-color: ${Black7};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black7, 0.3)};
+            }
+        `, css `
+            ${'' /* Color theme */}
+            :host {
+                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(White, 0.07)};
+                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.1)};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
+                --ni-private-switch-indicator-border-color: ${White};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(White, 0.3)};
+            }
+        `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/switch/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;iBACd,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;gCAKV,UAAU;;;;;;;;;;;;;;;;;;kBAkBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;8BAWV,UAAU;;;;;;;;;;;;;CAavC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;iEAE+B,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,KAAK;2EACI,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,OAAO;uEACE,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;;SAEJ,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;iEAEgC,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,iBAAiB,CACnE,OAAO,EACP,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,OAAO,EACP,GAAG,CACN;8DACiD,MAAM;uEACG,iBAAiB,CACxE,MAAM,EACN,GAAG,CACN;;SAEJ,EACG,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;iEAE+B,iBAAiB,CAClE,KAAK,EACL,IAAI,CACP;kEACqD,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,KAAK;uEACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;;SAEJ,CACA,CACJ,CAAC"}

package/dist/esm/switch/template.d.ts

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

package/dist/esm/switch/template.js

@@ -0,0 +1,38 @@
+import { html, slotted } from '@microsoft/fast-element';
+// prettier-ignore
+export const template = html `
+    <template
+        role="switch"
+        aria-checked="${x => x.checked}"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        tabindex="${x => (x.disabled ? null : 0)}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        class="${x => (x.checked ? 'checked' : '')}"
+    >
+        <label
+            part="label"
+            class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
+        >
+            <slot ${slotted('defaultSlottedNodes')}></slot>
+        </label>
+        <div class="switch-container">
+            <span class="status-message unchecked-message" part="unchecked-message">
+                <slot name="unchecked-message"></slot>
+            </span>
+            <div part="switch" class="switch">
+                <slot name="switch">
+                    <span class="checked-indicator-spacer"></span>
+                    <span class="checked-indicator" part="checked-indicator">
+                        <span class="checked-indicator-inner">
+                    </span>
+                </slot>
+            </div>
+            <span class="status-message checked-message" part="checked-message">
+                <slot name="checked-message"></slot>
+            </span>
+        </div>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/switch/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/switch/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGxD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAQ;;;wBAGZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3B,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;iBAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;;;;qBAI7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;oBAEvE,OAAO,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;CAmBjD,CAAC"}

package/package.json

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