@ni/nimble-components 29.1.0 → 29.1.2

package/dist/esm/utilities/style/display.js

@@ -0,0 +1,9 @@
+import { 
+// eslint-disable-next-line no-restricted-imports
+display as foundationDisplay } from '@microsoft/fast-foundation';
+/**
+ * This utility will generate the appropriate display style, as well as a style rule
+ * to hide the host element when its `hidden` attribute is set.
+ */
+export const display = (displayValue) => `${foundationDisplay(displayValue)}`;
+//# sourceMappingURL=display.js.map

package/dist/esm/utilities/style/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../../src/utilities/style/display.ts"],"names":[],"mappings":"AAAA,OAAO;AAEH,iDAAiD;AACjD,OAAO,IAAI,iBAAiB,EAC/B,MAAM,4BAA4B,CAAC;AAEpC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAA6B,CAC7C,YAAqC,EACvC,EAAE,CAAC,GAAG,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAC","sourcesContent":["import {\n    type CSSDisplayPropertyValue,\n    // eslint-disable-next-line no-restricted-imports\n    display as foundationDisplay\n} from '@microsoft/fast-foundation';\n\n/**\n * This utility will generate the appropriate display style, as well as a style rule\n * to hide the host element when its `hidden` attribute is set.\n */\nexport const display: typeof foundationDisplay = (\n    displayValue: CSSDisplayPropertyValue\n) => `${foundationDisplay(displayValue)}`;\n"]}

package/dist/esm/wafer-map/styles.js

@@ -1,9 +1,11 @@
 import { css } from '@microsoft/fast-element';
 import { DigitalGreenLight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { borderColor, borderWidth } from '../theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
 export const styles = css `
+    ${display('inline-block')}
+
     :host {
-        display: inline-block;
         width: 500px;
         height: 500px;
     }

package/dist/esm/wafer-map/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/wafer-map/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE3E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2DD,WAAW;kBACjB,WAAW;;;;;;;;;;;;;;yBAcJ,iBAAiB;;;;;;;;;;;;;;CAczC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { DigitalGreenLight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { borderColor, borderWidth } from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host {\n        display: inline-block;\n        width: 500px;\n        height: 500px;\n    }\n\n    .main-wafer {\n        display: inline-block;\n        position: absolute;\n    }\n\n    .worker-wafer {\n        display: inline-block;\n        position: absolute;\n    }\n\n    .wafer-map-container {\n        width: 100%;\n        height: 100%;\n        position: relative;\n        display: inline-block;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .svg-root {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n    }\n\n    .notch {\n        transform-origin: center center;\n    }\n\n    .notch.top {\n        transform: rotate(-90deg);\n    }\n\n    .notch.right {\n        transform: rotate(0deg);\n    }\n\n    .notch.left {\n        transform: rotate(180deg);\n    }\n\n    .notch.bottom {\n        transform: rotate(90deg);\n    }\n\n    .circle-base {\n        fill: white;\n    }\n\n    .circle-drawing-path {\n        shape-rendering: 'crispEdges';\n        vector-effect: non-scaling-stroke;\n        stroke-width: ${borderWidth};\n        stroke: ${borderColor};\n    }\n\n    .hover-layer {\n        position: absolute;\n        pointer-events: none;\n        width: 100%;\n        height: 100%;\n    }\n\n    .hover-rect {\n        fill: transparent;\n        stroke: white;\n        outline-style: solid;\n        outline-color: ${DigitalGreenLight};\n    }\n\n    .hover-rect.show {\n        opacity: 1;\n        stroke-width: 2px;\n        outline-width: 2px;\n    }\n\n    .hover-rect.hide {\n        opacity: 0;\n        stroke-width: 0px;\n        outline-width: 0px;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/wafer-map/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2DL,WAAW;kBACjB,WAAW;;;;;;;;;;;;;;yBAcJ,iBAAiB;;;;;;;;;;;;;;CAczC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { DigitalGreenLight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { borderColor, borderWidth } from '../theme-provider/design-tokens';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        width: 500px;\n        height: 500px;\n    }\n\n    .main-wafer {\n        display: inline-block;\n        position: absolute;\n    }\n\n    .worker-wafer {\n        display: inline-block;\n        position: absolute;\n    }\n\n    .wafer-map-container {\n        width: 100%;\n        height: 100%;\n        position: relative;\n        display: inline-block;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .svg-root {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n    }\n\n    .notch {\n        transform-origin: center center;\n    }\n\n    .notch.top {\n        transform: rotate(-90deg);\n    }\n\n    .notch.right {\n        transform: rotate(0deg);\n    }\n\n    .notch.left {\n        transform: rotate(180deg);\n    }\n\n    .notch.bottom {\n        transform: rotate(90deg);\n    }\n\n    .circle-base {\n        fill: white;\n    }\n\n    .circle-drawing-path {\n        shape-rendering: 'crispEdges';\n        vector-effect: non-scaling-stroke;\n        stroke-width: ${borderWidth};\n        stroke: ${borderColor};\n    }\n\n    .hover-layer {\n        position: absolute;\n        pointer-events: none;\n        width: 100%;\n        height: 100%;\n    }\n\n    .hover-rect {\n        fill: transparent;\n        stroke: white;\n        outline-style: solid;\n        outline-color: ${DigitalGreenLight};\n    }\n\n    .hover-rect.show {\n        opacity: 1;\n        stroke-width: 2px;\n        outline-width: 2px;\n    }\n\n    .hover-rect.hide {\n        opacity: 0;\n        stroke-width: 0px;\n        outline-width: 0px;\n    }\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "29.1.0",
+  "version": "29.1.2",
   "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",