@siemens/ix 1.0.0-beta.2

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

@@ -0,0 +1 @@
+export * from './page';

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

@@ -0,0 +1,3 @@
+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>;

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,12 @@
+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): Promise<void>;
+export declare function applyPolyfills(): Promise<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,10 @@
+{
+  "name": "siemens-ix-loader",
+  "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,86 @@
+{
+  "name": "@siemens/ix",
+  "version": "1.0.0-beta.2",
+  "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/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/siemens-ix/siemens-ix.esm.js",
+  "files": [
+    "dist/",
+    "loader/",
+    "src/**/*.md",
+    "scss/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs --prod",
+    "build:dev": "stencil build --docs",
+    "lint": "eslint src/**/*{.ts,.tsx}",
+    "start": "stencil build --dev --watch --serve",
+    "dev": "stencil build --watch",
+    "test": "stencil test --spec",
+    "test:watch": "stencil test --spec --watchAll --no-cache",
+    "test:coverage": "stencil test --spec --coverage",
+    "test:e2e": "playwright test --reporter html",
+    "test:e2e:list": "playwright test --reporter list",
+    "playwright.docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/packages/core -it mcr.microsoft.com/playwright:v1.24.0-focal /bin/bash",
+    "host-root": "http-server ./ -a 127.0.0.1 -p 8080",
+    "generate": "stencil generate",
+    "generate:theme": "ts-node -P ./scripts/tsconfig.json ./scripts/generate-theme"
+  },
+  "dependencies": {
+    "@stencil/core": "~2.15.0",
+    "animejs": "~3.2.1",
+    "hyperlist": "^1.0.0",
+    "luxon": "^3.0.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.24.1",
+    "@popperjs/core": "~2.11.0",
+    "@siemens/ix-icons": "1.0.0-beta.3",
+    "@stencil/angular-output-target": "^0.4.0",
+    "@stencil/eslint-plugin": "^0.4.0",
+    "@stencil/postcss": "^2.0.0",
+    "@stencil/react-output-target": "^0.3.1",
+    "@stencil/sass": "~1.5.2",
+    "@testing-library/dom": "^8.11.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/animejs": "^3.1.4",
+    "@types/jest": "^27.0.3",
+    "@types/luxon": "^3.0.0",
+    "@types/mustache": "^4.1.1",
+    "@types/puppeteer": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "animate.css": "~4.1.1",
+    "autoprefixer": "10.4.5",
+    "bootstrap": "~5.2.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.26.1",
+    "fs-extra": "^10.0.0",
+    "http-server": "^14.1.1",
+    "jest": "^27.4.5",
+    "jest-cli": "^27.4.5",
+    "mustache": "^4.2.0",
+    "puppeteer": "^10.0.0",
+    "sass": "^1.54.0",
+    "start-server-and-test": "^1.14.0",
+    "ts-node": "^10.0.0",
+    "typescript": "^4.2.4"
+  },
+  "peerDependencies": {
+    "@popperjs/core": "^2.11.0",
+    "bootstrap": "~5.2.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

package/scss/_common-variables.scss

@@ -0,0 +1,60 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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/_fonts.scss

@@ -0,0 +1,70 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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';
+
+.text-xs {
+  @include text-xs;
+}
+
+.text-s {
+  @include text-s;
+}
+
+.text-caption {
+  @include text-caption;
+}
+
+.text-caption-single {
+  @include text-caption-single;
+}
+
+.text-default {
+  @include text-default;
+}
+
+.text-default-single {
+  @include text-default-single;
+}
+
+.text-default-title {
+  @include text-default-title;
+}
+
+.text-default-title-single {
+  @include text-default-title-single;
+}
+
+.text-l {
+  @include text-l;
+}
+
+.text-l-single {
+  @include text-l-single;
+}
+
+.text-l-title {
+  @include text-l-title;
+}
+
+.text-l-title-single {
+  @include text-l-title-single;
+}
+
+.text-h2 {
+  @include text-h2;
+}
+
+.text-xl {
+  @include text-xl;
+}
+
+a {
+  color: var(--theme-color-primary);
+}

package/scss/_z-index.scss

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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-dropdown: 1000;
+  --theme-z-index-sticky: 1020;
+  --theme-z-index-fixed: 1030;
+  --theme-z-index-modal-backdrop: 1040;
+  --theme-z-index-modal: 1050;
+  --theme-z-index-popover: 1060;
+  --theme-z-index-tooltip: 1070;
+}

package/scss/components/_button-group.scss

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+
+.btn-group {
+  ix-button:first-child .btn {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  ix-button:last-child .btn {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  ix-button:not(:first-child):not(:last-child) .btn {
+    border-radius: 0px;
+  }
+}

package/scss/components/_buttons.scss

@@ -0,0 +1,150 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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/hover';
+@import './mixins/text-truncation';
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: $x-large-space;
+  font-size: $font-size-default;
+  font-weight: $font-weight-bold;
+  transition: $default-time;
+  padding: 0 $small-space;
+  min-width: 5rem;
+
+  @include ellipsis;
+
+  .glyph {
+    margin-right: $tiny-space;
+  }
+
+  .glyph {
+    font-weight: $font-weight-normal;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: none;
+  }
+}
+
+$button-categories: (primary, secondary);
+
+@mixin btn($name, $enable-border: true) {
+  .btn-#{$name} {
+    & {
+      border-radius: var(--theme-btn--border-radius);
+    }
+
+    &,
+    &.focus,
+    &:focus,
+    &:focus-visible {
+      background-color: var(--theme-btn-#{$name}--background);
+      color: var(--theme-btn-#{$name}--color);
+
+      @if $enable-border {
+        border-width: var(--theme-btn--border-thickness);
+        border-color: var(--theme-btn-#{$name}--border-color);
+        border-style: solid;
+      }
+    }
+
+    @include focus-visible {
+      outline: 1px solid var(--focus--border-color);
+      outline-offset: var(--theme-btn--focus--outline-offset);
+    }
+
+    &.selected {
+      background-color: var(--theme-btn-#{$name}--background--selected);
+    }
+
+    &.hover,
+    &:hover {
+      @if $enable-border {
+        border-color: var(--theme-btn-#{$name}--border-color--hover) !important;
+      }
+      background-color: var(--theme-btn-#{$name}--background--hover) !important;
+      color: var(--theme-btn-#{$name}--color--hover) !important;
+    }
+
+    &.selected {
+      &.hover,
+      &:hover {
+        background-color: var(--theme-btn-#{$name}--background--selected-hover);
+        color: var(--theme-btn-#{$name}--color--selected-hover);
+      }
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show > &.dropdown-toggle {
+      @if $enable-border {
+        border-color: var(--theme-btn-#{$name}--border-color--active) !important;
+      }
+      background-color: var(--theme-btn-#{$name}--background--active) !important;
+      color: var(--theme-btn-#{$name}--color--active) !important;
+    }
+
+    &.selected {
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        background-color: var(--theme-btn-#{$name}--background--selected-active);
+        color: var(--theme-btn-#{$name}--color--selected-active);
+      }
+    }
+
+    &.disabled,
+    &:disabled {
+      cursor: initial;
+      @if $enable-border {
+        border-color: var(--theme-btn-#{$name}--border-color--disabled);
+      }
+      background-color: var(--theme-btn-#{$name}--background--disabled);
+      color: var(--theme-btn-#{$name}--color--disabled);
+      opacity: 1;
+    }
+  }
+}
+
+@each $category in $button-categories {
+  @include btn($category);
+  @include btn('outline-#{$category}');
+  @include btn('invisible-#{$category}', false);
+}
+
+.btn-oval,
+.btn-icon {
+  min-width: $x-large-space;
+  width: $x-large-space;
+  .glyph {
+    margin-right: 0;
+  }
+}
+
+.btn-oval {
+  border-radius: 6.25rem;
+  width: $default-control-height;
+}
+
+.btn-icon-xs {
+  height: $default-space;
+  width: $default-space;
+  min-width: $default-space;
+}
+
+.btn-icon-s {
+  height: $large-space;
+  width: $large-space;
+  min-width: $large-space;
+}

package/scss/components/_checkboxes.scss

@@ -0,0 +1,177 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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: $large-space;
+
+  /* Base for label styling */
+  [type='checkbox']:not(:checked),
+  [type='checkbox']:checked {
+    position: absolute;
+    opacity: 0;
+  }
+
+  .ag-checkbox-input-wrapper {
+    [type='checkbox']:not(:checked),
+    [type='checkbox']:checked {
+      position: absolute;
+      visibility: unset;
+    }
+  }
+
+  [type='checkbox']:not(:checked) + label,
+  [type='checkbox']:checked + label {
+    position: relative;
+    line-height: $size;
+    user-select: none;
+
+    color: var(--theme-checkbox-label--color);
+  }
+
+  [type='checkbox']:not(:disabled) + label {
+    cursor: pointer;
+  }
+
+  [type='checkbox'] + label:before {
+    content: '';
+    width: $size;
+    height: $size;
+    float: left;
+    margin-right: $small-space;
+
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+  }
+
+  [type='checkbox'] + label:focus {
+    &:before {
+      outline: 1px solid var(--focus--border-color);
+      outline-offset: var(--theme-checkbox--focus--outline-offset);
+    }
+  }
+
+  [type='checkbox']:focus + label {
+    &:before {
+      outline: 1px solid var(--focus--border-color);
+      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: 9px;
+      height: 4px;
+      display: block;
+      border-top: none;
+      border-right: none;
+      border-bottom: 1px solid var(--theme-checkbox-checked--color);
+      border-left: 1px solid var(--theme-checkbox-checked--color);
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      transform: rotate(-45deg) scale(2);
+    }
+
+    &: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: 14px;
+      height: 1px;
+      border-bottom: 2px solid var(--theme-checkbox-mixed--color);
+      position: absolute;
+      top: 11px;
+      left: 5px;
+    }
+
+    & + 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();