@siemens/ix 0.0.0-20240419081748

package/dist/types/tests/utils/test/index.d.ts

@@ -0,0 +1,15 @@
+export * from './page';
+export declare const viewPorts: {
+    readonly sm: {
+        readonly height: 800;
+        readonly width: 360;
+    };
+    readonly md: {
+        readonly height: 768;
+        readonly width: 1024;
+    };
+    readonly lg: {
+        readonly height: 1080;
+        readonly width: 1920;
+    };
+};

package/dist/types/tests/utils/test/page.d.ts

@@ -0,0 +1,8 @@
+import { ElementHandle } from '@playwright/test';
+export declare const regressionTest: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & {
+    [key: string]: any;
+}, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;
+export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & {
+    mount: (selector: string) => Promise<ElementHandle<HTMLElement>>;
+    createElement: (selector: string, appendTo?: ElementHandle<Element>) => Promise<ElementHandle<HTMLElement>>;
+}, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

package/loader/cdn.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,21 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1,3 @@
+
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,4 @@
+
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "siemens-ix-loader",
+  "private": true,
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@siemens/ix",
+  "homepage": "https://ix.siemens.io",
+  "bugs": "https://github.com/siemens/ix/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/siemens/ix",
+    "directory": "packages/core"
+  },
+  "version": "0.0.0-20240419081748",
+  "license": "MIT",
+  "description": "Siemens iX Web Components",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/interfaces.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/siemens-ix/siemens-ix.esm.js",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "components/",
+    "dist/",
+    "loader/",
+    "scss/"
+  ],
+  "dependencies": {
+    "@floating-ui/dom": "^1.5.1",
+    "@stencil/core": "^4.13.0",
+    "@types/luxon": "^3.3.7",
+    "animejs": "~3.2.1",
+    "hyperlist": "^1.0.0",
+    "luxon": "^3.4.4"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.32.1",
+    "@siemens/ix-icons": "^2.0.0",
+    "@stencil-community/eslint-plugin": "^0.7.1",
+    "@stencil-community/postcss": "^2.2.0",
+    "@stencil/angular-output-target": "^0.8.3",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/sass": "^3.0.8",
+    "@stencil/vue-output-target": "^0.8.7",
+    "@testing-library/dom": "^8.11.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/animejs": "^3.1.4",
+    "@types/jest": "^29.5.6",
+    "@types/mustache": "^4.1.1",
+    "@types/node": "^16.18.11",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "animate.css": "~4.1.1",
+    "autoprefixer": "10.4.5",
+    "bootstrap": "^5.2.0",
+    "cssnano": "^6.0.1",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "fs-extra": "^10.0.0",
+    "http-server": "^14.1.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "mustache": "^4.2.0",
+    "postcss": "^8.4.29",
+    "puppeteer": "21.1.1",
+    "rimraf": "^5.0.5",
+    "sass": "^1.58.3",
+    "start-server-and-test": "^1.14.0",
+    "ts-node": "^10.0.0",
+    "typescript": "^5.3.3",
+    "eslint-config-ix": "1.0.0"
+  },
+  "peerDependencies": {
+    "@popperjs/core": "^2.11.0",
+    "@siemens/ix-icons": "^2.0.0",
+    "bootstrap": "~5.2.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "scripts": {
+    "build": "stencil build --prod && npm run build:scss",
+    "build:scss": "ts-node -P ./scripts/build/tsconfig.json ./scripts/build/build-css.ts",
+    "build:dev": "stencil build",
+    "lint": "eslint src/**/*{.ts,.tsx}",
+    "start": "stencil build --dev --watch --serve",
+    "dev": "stencil build --watch",
+    "test": "npm run test:spec && npm run test:ct",
+    "test:spec": "stencil test --spec",
+    "test:ct": "playwright test --config playwright-ct.config.ts --reporter list",
+    "visual-regression": "playwright test",
+    "host-root": "http-server ./ -a 127.0.0.1 -p 8080 -c-1",
+    "generate": "stencil generate",
+    "pkg": "pnpm pack"
+  }
+}

package/scss/_common-variables.scss

@@ -0,0 +1,60 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* Dimensions */
+$x-large-space: 2rem;
+$large-space: 1.5rem;
+$default-space: 1rem;
+$medium-space: 0.75rem;
+$small-space: 0.5rem;
+$tiny-space: 0.25rem;
+
+$default-control-height: 2rem;
+$large-control-height: 2.5rem;
+$medium-control-height: 1.5rem;
+
+$large-icon-size: 2rem;
+$default-icon-size: 1.5rem;
+$small-icon-size: 1rem;
+
+$default-border-radius: 0.25rem;
+
+/* Font sizes */
+$font-size-xs: 0.625rem;
+$font-size-s: 0.75rem;
+$font-size-caption: 0.75rem;
+$font-size-default: 0.875rem;
+$font-size-l: 1rem;
+$font-size-xl: 1.375rem;
+
+$font-weight-normal: 400;
+$font-weight-bold: 700;
+
+/* Line heights */
+$line-height-xs: 1.4em;
+$line-height-s: 1.5em;
+$line-height-caption: 1.5em;
+$line-height-caption-single: 1em;
+$line-height-default: 1.429em;
+$line-height-default-single: 1.143em;
+$line-height-l: 1.5em;
+$line-height-l-single: 1.25em;
+$line-height-h2: 1.455em;
+$line-height-xl: 1.091em;
+
+/* Animation timings */
+$x-slow-time: 1s;
+$slow-time: 500ms;
+$medium-time: 300ms;
+$default-time: 150ms;
+$short-time: 0ms;
+
+$input-padding-y: 0.5rem;
+$input-padding-x: 0.5rem;
+$input-min-width: 2rem;

package/scss/_core.scss

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* Import global stylings for Web Components */
+@import './../src/components/toast/styles/toast-container';
+
+@import './legacy/mixins/fonts';
+@import './legacy/fonts';
+
+/* Common */
+@import './common-variables';
+@import 'z-index';
+
+/* Components */
+@import 'legacy/components/modal';
+@import 'legacy/components/buttons';
+@import 'legacy/components/button-group';
+@import 'legacy/components/dropdown';
+@import 'legacy/components/forms';
+@import './components/form/input';
+@import './components/links';
+@import './components/checkboxes';
+@import './components/radiobuttons';
+@import './components/shadows';
+@import './components/input-group';
+@import './components/table';
+@import './components/fonts';
+
+@import 'mixins/scrollbar';
+
+:root {
+  --animate-duration: #{$default-time};
+  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+body {
+  @include typography-body();
+  color: var(--theme-color-std-text);
+  background-color: var(--theme-color-1);
+  margin: 0;
+}
+
+body:not(.disable-scrollbar) {
+  @include scrollbar();
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}

package/scss/_z-index.scss

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+:root {
+  --theme-z-index-sticky: 1020;
+  --theme-z-index-fixed: 1030;
+  --theme-z-index-modal-backdrop: 1040;
+  --theme-z-index-modal: 1050;
+  --theme-z-index-dropdown: 1060;
+  --theme-z-index-tooltip: 1070;
+}

package/scss/components/_checkboxes.scss

@@ -0,0 +1,197 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@mixin checkbox-basic() {
+  $size: 1.125rem;
+
+  /* Base for label styling */
+  [type='checkbox']:not(:checked),
+  [type='checkbox']:checked {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    max-height: 1px;
+    max-width: 1px;
+    min-height: 0px;
+    min-width: 0px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    appearance: none;
+  }
+
+  [type='checkbox']:not(:checked) + label,
+  [type='checkbox']:checked + label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    color: var(--theme-checkbox-label--color);
+    height: $size;
+    min-height: $size;
+    max-height: $size;
+  }
+
+  [type='checkbox']:not(:disabled) + label {
+    cursor: pointer;
+  }
+
+  [type='checkbox'] + label:before {
+    content: '';
+    width: $size;
+    height: $size;
+    min-width: $size;
+    min-height: $size;
+    max-width: $size;
+    max-height: $size;
+    float: left;
+    margin-right: $small-space;
+
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+  }
+
+  [type='checkbox'] + label:focus-visible {
+    &:before {
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
+      outline-offset: var(--theme-checkbox--focus--outline-offset);
+    }
+  }
+
+  [type='checkbox']:focus-visible + label {
+    &:before {
+      outline: 0.0625rem solid var(--theme-color-focus-bdr);
+      outline-offset: var(--theme-checkbox--focus--outline-offset);
+    }
+  }
+
+  [type='checkbox']:not(:checked) {
+    & + label:before {
+      background-color: var(--theme-checkbox-unchecked--background);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color);
+    }
+
+    &:hover + label:before {
+      background-color: var(--theme-checkbox-unchecked--background--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--hover);
+    }
+
+    &:active + label:before {
+      background-color: var(--theme-checkbox-unchecked--background--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--active);
+    }
+
+    &:disabled + label::before {
+      background-color: var(--theme-checkbox-unchecked--background--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--disabled);
+    }
+  }
+
+  [type='checkbox']:checked {
+    & + label:before {
+      background-color: var(--theme-checkbox-checked--background);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color);
+    }
+
+    & + label:after {
+      content: '';
+      width: 0.4rem;
+      height: 0.26rem;
+      display: block;
+      border-top: none;
+      border-right: none;
+      border-bottom: 0.0625rem solid var(--theme-checkbox-checked--color);
+      border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
+      position: absolute;
+      margin: 0.31rem 0.42rem 0.1875rem;
+      transform: translate(-1px, -3px) rotate(-53deg) scale(2)
+        skew(-8deg, -3deg);
+    }
+
+    &:hover + label:before {
+      background-color: var(--theme-checkbox-checked--background--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--hover);
+    }
+
+    &:active + label:before {
+      background-color: var(--theme-checkbox-checked--background--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--active);
+    }
+
+    &:disabled + label:before {
+      background-color: var(--theme-checkbox-checked--background--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--disabled);
+    }
+
+    &:disabled + label::after {
+      border-color: var(--theme-checkbox-checked--color--disabled);
+    }
+  }
+
+  [type='checkbox']:disabled + label:before {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  [type='checkbox']:indeterminate {
+    & + label:after {
+      content: '';
+      display: block;
+      width: 0.625rem;
+      height: 0.125rem;
+      border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color);
+      position: absolute;
+      margin: 0 0 0 0.25rem;
+    }
+
+    & + label:before {
+      background-color: var(--theme-checkbox-mixed--background);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color);
+    }
+
+    &:hover + label:before {
+      background-color: var(--theme-checkbox-mixed--background--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--hover);
+    }
+
+    &:active + label:before {
+      background-color: var(--theme-checkbox-mixed--background--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--active);
+    }
+
+    &:disabled + label::before {
+      background-color: var(--theme-checkbox-mixed--background--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--disabled);
+    }
+
+    &:disabled + label::after {
+      border-color: var(--theme-checkbox-mixed--color--disabled);
+    }
+  }
+
+  [type='checkbox']:disabled + label {
+    color: var(--theme-checkbox-label--color--disabled);
+  }
+}
+
+@include checkbox-basic();

package/scss/components/_fonts.scss

@@ -0,0 +1,131 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@import 'mixins/fonts';
+
+@mixin font-label {
+  .typography-label {
+    @include typography-label;
+  }
+
+  .typography-label-xs {
+    @include typography-label-xs;
+  }
+
+  .typography-label-sm {
+    @include typography-label-sm;
+  }
+
+  .typography-label-lg {
+    @include typography-label-lg;
+  }
+
+  .typography-body {
+    @include typography-body;
+  }
+
+  .typography-body-xs {
+    @include typography-body-xs;
+  }
+
+  .typography-body-sm {
+    @include typography-body-sm;
+  }
+
+  .typography-body-lg {
+    @include typography-body-lg;
+  }
+
+  .typography-display {
+    @include typography-display;
+  }
+
+  .typography-display-xs {
+    @include typography-display-xs;
+  }
+
+  .typography-display-sm {
+    @include typography-display-sm;
+  }
+
+  .typography-display-lg {
+    @include typography-display-lg;
+  }
+
+  .typography-display-xl {
+    @include typography-display-xl;
+  }
+
+  .typography-display-xxl {
+    @include typography-display-xxl;
+  }
+
+  h6,
+  .typography-h6 {
+    @include typography-h6;
+  }
+
+  h5,
+  .typography-h5 {
+    @include typography-h5;
+  }
+
+  h4,
+  .typography-h4 {
+    @include typography-h4;
+  }
+
+  h3,
+  .typography-h3 {
+    @include typography-h3;
+  }
+
+  h2,
+  .typography-h2 {
+    @include typography-h2;
+  }
+
+  h1,
+  .typography-h1 {
+    @include typography-h1;
+  }
+
+  .typography-code {
+    @include typography-code;
+  }
+
+  .typography-code-lg {
+    @include typography-code-lg;
+  }
+
+  .typography-code-sm {
+    @include typography-code-sm;
+  }
+
+  .typography-decoration-none {
+    text-decoration: none !important;
+  }
+
+  .typography-decoration-underline {
+    text-decoration: underline !important;
+  }
+
+  .typography-decoration-line-through {
+    text-decoration: line-through !important;
+  }
+
+  .typography-weight-bold {
+    font-weight: 700 !important;
+  }
+
+  a {
+    color: var(--theme-color-primary);
+  }
+}
+
+@include font-label();

package/scss/components/_input-group.scss

@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import './../common-variables';
+
+.input-group-label {
+  color: var(--theme-input-unit--color);
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.group-start {
+  .input-group-label:first-child {
+    margin-left: 8px;
+  }
+  .input-group-label:last-child {
+    margin-right: 4px;
+  }
+}
+
+.group-end {
+  .input-group-label:first-child {
+    margin-left: 4px;
+  }
+  .input-group-label:last-child {
+    margin-right: 8px;
+  }
+}