@ni/nimble-components 11.7.2 → 11.8.0

package/dist/esm/all-components.d.ts

@@ -7,6 +7,7 @@ import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';
+import './card-button';
 import './checkbox';
 import './combobox';
 import './drawer';

package/dist/esm/all-components.js

@@ -7,6 +7,7 @@ import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';
+import './card-button';
 import './checkbox';
 import './combobox';
 import './drawer';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/card-button/index.d.ts

@@ -0,0 +1,17 @@
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-card-button': CardButton;
+    }
+}
+/**
+ * A nimble-styled card button
+ */
+export declare class CardButton extends FoundationButton {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+}

package/dist/esm/card-button/index.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled card button
+ */
+export class CardButton extends FoundationButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * @public
+         * @remarks
+         * HTML Attribute: selected
+         */
+        this.selected = false;
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], CardButton.prototype, "selected", void 0);
+/**
+ * A function that returns a nimble-card-button registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-card-button\>
+ *
+ */
+const nimbleCardButton = CardButton.compose({
+    baseName: 'card-button',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
+//# sourceMappingURL=index.js.map

package/dist/esm/card-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/card-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAC1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAAhD;;QACI;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;IAC5B,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAG5B;;;;;;;;GAQG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,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"}

package/dist/esm/card-button/styles.d.ts

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

package/dist/esm/card-button/styles.js

@@ -0,0 +1,149 @@
+import { css } from '@microsoft/fast-element';
+import { Black, Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { borderWidth, smallDelay, buttonLabelFont, buttonLabelFontColor, borderHoverColor } from '../theme-provider/design-tokens';
+import { themeBehavior } from '../utilities/style/theme';
+import { hexToRgbaCssColor } from '../utilities/style/colors';
+// prettier-ignore
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        background-color: transparent;
+        color: ${buttonLabelFontColor};
+        font: ${buttonLabelFont};
+        cursor: pointer;
+        outline: none;
+        border: none;
+        box-sizing: border-box;
+    }
+
+    :host(:hover) {
+        box-shadow: 0px 1px 4px
+            var(--ni-private-card-button-box-shadow-hover-color);
+    }
+
+    :host(:active) {
+        box-shadow: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        box-shadow: none;
+    }
+
+    .control {
+        background-color: transparent;
+        height: 100%;
+        width: 100%;
+        border: ${borderWidth} solid transparent;
+        color: inherit;
+        border-radius: inherit;
+        fill: inherit;
+        cursor: inherit;
+        font: inherit;
+        outline: none;
+        transition: box-shadow ${smallDelay};
+        padding: 0px;
+    }
+
+    .control:hover {
+        background: var(--ni-private-card-button-background-hover-color);
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        border-color: ${borderHoverColor};
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -4px;
+    }
+
+    .control:active {
+        background: var(--ni-private-card-button-background-active-color);
+        border-color: var(--ni-private-card-button-border-active-color);
+        outline: none;
+        box-shadow: none;
+    }
+
+    :host([selected]) .control {
+        background: var(--ni-private-card-button-background-active-color);
+        border-color: var(--ni-private-card-button-border-selected-color);
+    }
+
+    :host([selected]) .control${focusVisible} {
+        border-color: ${borderHoverColor};
+    }
+
+    :host([selected]) .control:active {
+        border-color: var(--ni-private-card-button-border-active-color);
+    }
+
+    :host([selected]) .control${focusVisible}:active {
+        outline: none;
+        box-shadow: none;
+    }
+
+    .control[disabled] {
+        background: transparent;
+        opacity: 0.3;
+    }
+
+    .control[disabled]:active {
+        border-color: transparent;
+    }
+
+    :host([selected]) .control[disabled]:active {
+        border-color: var(--ni-private-card-button-border-selected-color);
+    }
+
+    .content {
+        display: contents;
+    }
+
+    slot[name='start'] {
+        display: none;
+    }
+
+    slot[name='end'] {
+        display: none;
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+`
+    .withBehaviors(themeBehavior(
+// Light theme
+css `
+                :host {
+                    --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(Black, 0.3)};
+                    --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.3)};
+                    --ni-private-card-button-background-active-color: ${White};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black91, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(Black91, 0.6)};
+                }
+            `, 
+// Dark theme
+css `
+                :host {
+                    --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(Black, 0.77)};
+                    --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(Black15, 0.07)};
+                    --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(Black15, 0.15)};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black15, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${Black15};
+                }
+            `, 
+// Color theme
+css `
+                :host {
+                    --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(White, 0.77)};
+                    --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.2)};
+                    --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(White, 0.4)};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(White, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(White, 0.6)};
+                }
+            `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/card-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/card-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,oBAAoB;gBACrB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;kBAyBb,WAAW;;;;;;;iCAOI,UAAU;;;;;;;;cAQ7B,YAAY;kCACQ,WAAW,IAAI,gBAAgB;wBACzC,gBAAgB;mBACrB,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;gCAgBxB,YAAY;wBACpB,gBAAgB;;;;;;;gCAOR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC3C;KACI,aAAa,CACV,aAAa;AACT,cAAc;AACd,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;uEAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;wEAC5B,KAAK;oEACT,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;sEAC7B,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;;aAExF;AACD,aAAa;AACb,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;uEAC9B,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC;wEAC/B,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC;oEACpC,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;sEAC7B,OAAO;;aAEhE;AACD,cAAc;AACd,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;uEAC9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;wEAC5B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;oEACjC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;sEAC3B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;aAEtF,CACJ,CACJ,CAAC"}

package/package.json

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