@ni/ok-components 0.0.2

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

@@ -0,0 +1,8 @@
+/**
+ * Import of all the web components available in Nimble, Spright, and Ok.
+ * Production applications are encouraged to import only components
+ * that are required instead of leveraging this file.
+ */
+import '@ni/nimble-components/dist/esm/all-components';
+import '@ni/spright-components/dist/esm/all-components';
+import './button';

package/dist/esm/all-components.js

@@ -0,0 +1,9 @@
+/**
+ * Import of all the web components available in Nimble, Spright, and Ok.
+ * Production applications are encouraged to import only components
+ * that are required instead of leveraging this file.
+ */
+import '@ni/nimble-components/dist/esm/all-components';
+import '@ni/spright-components/dist/esm/all-components';
+import './button';
+//# sourceMappingURL=all-components.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+CAA+C,CAAC;AACvD,OAAO,gDAAgD,CAAC;AAExD,OAAO,UAAU,CAAC","sourcesContent":["/**\n * Import of all the web components available in Nimble, Spright, and Ok.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/nimble-components/dist/esm/all-components';\nimport '@ni/spright-components/dist/esm/all-components';\n\nimport './button';\n"]}

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

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-button': Button;
+    }
+}
+/**
+ * A Ok demo component (not for production use)
+ */
+export declare class Button extends FoundationElement {
+}
+export declare const buttonTag = "ok-button";

package/dist/esm/button/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Ok demo component (not for production use)
+ */
+export class Button extends FoundationElement {
+}
+const okButton = Button.compose({
+    baseName: 'button',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okButton());
+export const buttonTag = 'ok-button';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,iBAAiB;CAAG;AAEhD,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC;IAC5B,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;AACjE,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-button': Button;\n    }\n}\n\n/**\n * A Ok demo component (not for production use)\n */\nexport class Button extends FoundationElement {}\n\nconst okButton = Button.compose({\n    baseName: 'button',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okButton());\nexport const buttonTag = 'ok-button';\n"]}

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

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

package/dist/esm/button/styles.js

@@ -0,0 +1,28 @@
+import { css } from '@ni/fast-element';
+import { bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
+export const styles = css `
+    ${display('inline-block')}
+
+    :host {
+        border: 2px solid ${borderHoverColor};
+    }
+
+    :host(:hover) {
+        border-width: 4px;
+    }
+
+    :host([disabled]) {
+        border-color: rgba(${borderRgbPartialColor}, 0.2);
+    }
+
+    slot {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    :host([disabled]) slot {
+        color: ${bodyDisabledFontColor};
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACxB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;4BAGD,gBAAgB;;;;;;;;6BAQf,qBAAqB;;;;gBAIlC,QAAQ;iBACP,aAAa;;;;iBAIb,qBAAqB;;CAErC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        border: 2px solid ${borderHoverColor};\n    }\n\n    :host(:hover) {\n        border-width: 4px;\n    }\n\n    :host([disabled]) {\n        border-color: rgba(${borderRgbPartialColor}, 0.2);\n    }\n\n    slot {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) slot {\n        color: ${bodyDisabledFontColor};\n    }\n`;\n"]}

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

@@ -0,0 +1 @@
+export declare const template: import("@ni/fast-element").ViewTemplate<any, any>;

package/dist/esm/button/template.js

@@ -0,0 +1,3 @@
+import { html } from '@ni/fast-element';
+export const template = html `<slot></slot>`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA,eAAe,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\n\nexport const template = html`<slot></slot>`;\n"]}

package/dist/esm/utilities/style/display.d.ts

@@ -0,0 +1,8 @@
+import { display as foundationDisplay } from '@ni/fast-foundation';
+/**
+ * Each element should use the display utility which will create styles to:
+ * - Set the `:host` display property
+ * - Respond to the `hidden` attribute set on `:host`
+ * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
+ */
+export declare const display: typeof foundationDisplay;

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

@@ -0,0 +1,11 @@
+import { 
+// eslint-disable-next-line no-restricted-imports
+display as foundationDisplay } from '@ni/fast-foundation';
+/**
+ * Each element should use the display utility which will create styles to:
+ * - Set the `:host` display property
+ * - Respond to the `hidden` attribute set on `:host`
+ * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
+ */
+export const display = (displayValue) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
+//# 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,qBAAqB,CAAC;AAE7B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAA6B,CAC7C,YAAqC,EACvC,EAAE,CAAC,GAAG,iBAAiB,CAAC,YAAY,CAAC,2HAA2H,CAAC","sourcesContent":["import {\n    type CSSDisplayPropertyValue,\n    // eslint-disable-next-line no-restricted-imports\n    display as foundationDisplay\n} from '@ni/fast-foundation';\n\n/**\n * Each element should use the display utility which will create styles to:\n * - Set the `:host` display property\n * - Respond to the `hidden` attribute set on `:host`\n * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements\n */\nexport const display: typeof foundationDisplay = (\n    displayValue: CSSDisplayPropertyValue\n) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;\n"]}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@ni/ok-components",
+  "version": "0.0.2",
+  "description": "NI Ok Components",
+  "scripts": {
+    "build": "npm run build-components && npm run bundle-components",
+    "lint": "npm run eslint && npm run prettier",
+    "format": "npm run prettier-fix",
+    "eslint": "eslint .",
+    "eslint-fix": "eslint . --fix",
+    "prettier": "prettier-eslint \"**/*.*\" --list-different --prettier-ignore",
+    "prettier-fix": "prettier-eslint \"**/*.*\" --write --prettier-ignore",
+    "pack": "npm pack",
+    "invoke-publish": "npm publish",
+    "build-components": "tsc -p ./tsconfig.json",
+    "build-components:watch": "tsc -p ./tsconfig.json -w",
+    "bundle-components": "rollup --bundleConfigAsCjs --config",
+    "tdd": "npm run build-components && npm run test-chrome",
+    "tdd:watch": "npm run build-components:watch & npm run test-chrome:watch",
+    "tdd-firefox": "npm run build-components && npm run test-firefox",
+    "tdd-firefox:watch": "npm run build-components:watch & npm run test-firefox:watch",
+    "tdd-webkit": "npm run build-components && npm run test-webkit",
+    "tdd-webkit:watch": "npm run build-components:watch & npm run test-webkit:watch",
+    "test-chrome:debugger": "karma start karma.conf.js --browsers=ChromeDebugging --skip-tags SkipChrome",
+    "test-chrome:watch": "karma start karma.conf.headless.js --browsers=ChromeHeadlessOpt --skip-tags SkipChrome --watch-extensions js",
+    "test-chrome": "karma start karma.conf.headless.js --browsers=ChromeHeadlessOpt --single-run --skip-tags SkipChrome",
+    "test-firefox:debugger": "karma start karma.conf.js --browsers=FirefoxDebugging --skip-tags SkipFirefox",
+    "test-firefox:watch": "karma start karma.conf.headless.js --browsers=FirefoxHeadless --skip-tags SkipFirefox --watch-extensions js",
+    "test-firefox": "karma start karma.conf.headless.js --browsers=FirefoxHeadless --single-run --skip-tags SkipFirefox",
+    "test-webkit:debugger": "karma start karma.conf.js --browsers=WebkitDebugging --skip-tags SkipWebkit",
+    "test-webkit:watch": "karma start karma.conf.headless.js --browsers=WebkitHeadless --skip-tags SkipWebkit --watch-extensions js",
+    "test-webkit": "karma start karma.conf.headless.js --browsers=WebkitHeadless --single-run --skip-tags SkipWebkit",
+    "test": "npm run test-chrome && npm run test-firefox && npm run test-webkit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ni/nimble.git",
+    "directory": "packages/ok-components"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "National Instruments"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ni/nimble/issues"
+  },
+  "homepage": "https://github.com/ni/nimble#readme",
+  "dependencies": {
+    "@ni/fast-element": "^10.0.0",
+    "@ni/fast-foundation": "^10.1.2",
+    "@ni/fast-web-utilities": "^10.0.0",
+    "@ni/nimble-components": "^34.3.0",
+    "@ni/spright-components": "^6.3.0",
+    "tslib": "^2.2.0"
+  },
+  "devDependencies": {
+    "@ni/jasmine-parameterized": "^1.0.1",
+    "@ni-private/eslint-config-nimble": "*",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@types/jasmine": "^5.1.4",
+    "@types/webpack-env": "^1.15.2",
+    "jasmine-core": "^5.1.2",
+    "karma": "^6.3.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-firefox-launcher": "^2.1.0",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "karma-jasmine-spec-tags": "^2.0.0",
+    "karma-source-map-support": "^1.4.0",
+    "karma-sourcemap-loader": "^0.4.0",
+    "karma-spec-reporter": "^0.0.36",
+    "karma-webkit-launcher": "^2.6.0",
+    "karma-webpack": "^5.0.0",
+    "playwright": "1.53.1",
+    "prettier-eslint": "^16.3.0",
+    "prettier-eslint-cli": "^8.0.1",
+    "rollup": "^4.12.0",
+    "rollup-plugin-sourcemaps2": "^0.5.0",
+    "source-map-loader": "^5.0.0",
+    "typescript": "~5.4.5",
+    "webpack": "^5.75.0",
+    "webpack-dev-middleware": "^7.0.0"
+  }
+}