@siemens/ix 2.4.1 → 2.6.0

package/package.json

@@ -7,13 +7,14 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "2.4.1",
+  "version": "2.6.0",
   "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",
+  "jsnext:main": "dist/esm/index.js",
   "types": "dist/types/interfaces.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
@@ -28,7 +29,7 @@
     "hydrate/"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.5.1",
+    "@floating-ui/dom": "^1.6.10",
     "@stencil/core": "~4.17.0",
     "@types/luxon": "^3.3.7",
     "animejs": "~3.2.1",
@@ -38,18 +39,18 @@
   "devDependencies": {
     "@playwright/test": "^1.32.1",
     "@siemens/ix-icons": "^2.0.0",
-    "@stencil-community/eslint-plugin": "^0.7.1",
+    "@stencil-community/eslint-plugin": "^0.7.2",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "^0.8.3",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.8",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "0.8.8",
     "@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",
+    "@types/node": "^20.16.0",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "animate.css": "~4.1.1",
@@ -71,7 +72,8 @@
     "start-server-and-test": "^1.14.0",
     "ts-node": "^10.0.0",
     "typescript": "^5.3.3",
-    "eslint-config-ix": "1.0.0"
+    "eslint-config-ix": "1.0.0",
+    "strict-check": "1.0.0"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.11.0",
@@ -84,15 +86,14 @@
     }
   },
   "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",
+    "build": "stencil build --prod && npm run build.scss",
+    "build.scss": "ts-node -P ./scripts/build/tsconfig.json ./scripts/build/build-css.ts",
+    "build.watch": "stencil build --watch",
     "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",
+    "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",

package/scss/_core.scss

@@ -39,6 +39,11 @@
   --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';
+
+  --ix-safe-area-inset-top: 0rem;
+  --ix-safe-area-inset-right: 0rem;
+  --ix-safe-area-inset-bottom: 0rem;
+  --ix-safe-area-inset-left: 0rem;
 }
 
 body {

package/scss/components/_checkboxes.scss

@@ -13,18 +13,11 @@
   /* 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;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
   }
 
   [type='checkbox']:not(:checked) + label,

package/scss/components/form/_input.scss

@@ -8,6 +8,7 @@
  */
 @import 'common-variables';
 @import 'mixins/fonts';
+@import 'mixins/validation/form-component';
 
 @mixin element-input($feature-read-only: true) {
   & {
@@ -17,7 +18,7 @@
     padding: 0.25rem 0.5rem;
     background-color: var(--theme-input--background);
     color: var(--theme-input--color);
-    -moz-appearance: textfield;
+    appearance: textfield;
     text-overflow: ellipsis;
     border: var(--theme-input--border-thickness, 1px) solid
       var(--theme-input--border-color);
@@ -41,15 +42,33 @@
 
   &.hover,
   &:hover {
-    border-color: var(--theme-input--border-color--hover) !important;
-    background-color: var(--theme-input--background--hover);
+    &:not(
+        .readonly,
+        .read-only,
+        .disabled,
+        [readonly],
+        [disabled],
+        :read-only
+      ) {
+      border-color: var(--theme-input--border-color--hover) !important;
+      background-color: var(--theme-input--background--hover);
+    }
   }
 
   &.focus,
   &:focus {
-    outline: 1px solid var(--theme-color-focus-bdr);
-    outline-offset: var(--theme-input--focus--outline-offset);
-    border-color: var(--theme-input--border-color--focus) !important;
+    &:not(
+        .readonly,
+        .read-only,
+        .disabled,
+        [readonly],
+        [disabled],
+        :read-only
+      ) {
+      outline: 1px solid var(--theme-color-focus-bdr);
+      outline-offset: var(--theme-input--focus--outline-offset);
+      border-color: var(--theme-input--border-color--focus) !important;
+    }
   }
 
   @if $feature-read-only == true {
@@ -59,6 +78,7 @@
       background-color: transparent;
       outline: none;
       border: none;
+      border-radius: 0;
       border-bottom: var(--theme-input--border-thickness, 1px)
         solid
         var(--theme-input--border-color-bottom--readonly);
@@ -72,23 +92,25 @@
     }
   }
 
-  &:disabled {
+  &:disabled,
+  &.disabled {
     box-shadow: none;
     background-color: transparent;
     outline: none;
     border: none;
+    border-radius: 0;
     color: var(--theme-input--color--disabled);
     border-bottom: var(--theme-input--border-thickness, 1px) solid
       var(--theme-input--border-color-bottom--disabled);
   }
 
-  &:disabled::placeholder {
+  &:disabled::placeholder,
+  &.disabled::placeholder {
     color: transparent;
   }
 }
 
 @mixin element-textarea {
-  height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
 
@@ -177,6 +199,59 @@
       display: none !important;
     }
   }
+
+  @include input-valid;
+
+  @include input-info {
+    & {
+      border-color: var(--theme-input--border-color--info);
+    }
+
+    &:hover {
+      border-color: var(--theme-input--border-color--info--hover) !important;
+    }
+
+    &:active {
+      border-color: var(--theme-input--border-color--info--active) !important;
+    }
+  }
+
+  @include input-warning {
+    & {
+      border-color: var(
+        --theme-input--border-color--warning--active
+      ) !important;
+    }
+
+    &:hover {
+      border-color: var(
+        --theme-input--border-color--warning--active
+      ) !important;
+    }
+
+    &:active {
+      border-color: var(
+        --theme-input--border-color--warning--active
+      ) !important;
+    }
+  }
+
+  @include input-invalid {
+    & {
+      background-color: var(--theme-input--background--invalid);
+      border-color: var(--theme-input--border-color--invalid) !important;
+    }
+
+    &:hover {
+      border-color: var(--theme-input--border-color--invalid--hover) !important;
+    }
+
+    &:active {
+      border-color: var(
+        --theme-input--border-color--invalid--active
+      ) !important;
+    }
+  }
 }
 
 @include form;

package/scss/mixins/_field.scss

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+ @mixin input-invalid {
+  background-color: var(--theme-input-error--background);
+  border-color: var(--theme-input-error--border-color);
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+  background-position: left calc(0.375em + 0.1875rem) center;
+  padding-right: 0.75rem;
+  padding-left: calc(1.5em + 0.75rem);
+  background-size: 18px;
+  background-repeat: no-repeat;
+}

package/scss/mixins/validation/_form-component.scss

@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+$notDisabled: ':not(.disabled):not(:disabled):not([disabled])';
+
+@mixin host-valid {
+  :host(.ix-valid#{$notDisabled}:not(.ix-suppress-valid):not(.ix-invalid--required)) {
+    @content;
+  }
+}
+
+@mixin host-info {
+  :host(.ix-info#{$notDisabled}) {
+    @content;
+  }
+}
+
+@mixin host-warning {
+  :host(.ix-warning#{$notDisabled}) {
+    @content;
+  }
+}
+
+@mixin host-invalid {
+  :host([class*='ix-invalid']#{$notDisabled}),
+  :host(.ix-invalid--required#{$notDisabled}) {
+    @content;
+  }
+}
+
+@mixin input-valid {
+  textarea,
+  input {
+    &.ix-valid#{$notDisabled}:not(.ix-suppress-valid):not(.ix-invalid--required) {
+      @content;
+    }
+  }
+}
+
+@mixin input-info {
+  textarea.ix-info#{$notDisabled},
+  input.ix-info#{$notDisabled} {
+    @content;
+  }
+}
+
+@mixin input-warning {
+  textarea.ix-warning#{$notDisabled},
+  input.ix-warning#{$notDisabled} {
+    @content;
+  }
+}
+
+@mixin input-invalid {
+  textarea[class*='ix-invalid']#{$notDisabled},
+  input[class*='ix-invalid']#{$notDisabled} {
+    @content;
+  }
+}

package/components/ix-form-field.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface IxFormField extends Components.IxFormField, HTMLElement {}
-export const IxFormField: {
-    prototype: IxFormField;
-    new (): IxFormField;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/ix-form-field.js

@@ -1,44 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const formFieldCss = "label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:contents}";
-const IxFormFieldStyle0 = formFieldCss;
-
-const FormField = /*@__PURE__*/ proxyCustomElement(class FormField extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.label = undefined;
-    }
-    get inputElement() {
-        return this.hostElement.querySelector('input');
-    }
-    componentWillLoad() { }
-    render() {
-        return (h(Host, { key: '34305cf7e6ee023ae323d2c1b13248bb08f50001' }, this.label ? (h("label", { htmlFor: this.inputElement.id }, this.label)) : null, h("slot", { key: '7d9937b61fd5f5aa4711a7551c0665a1f048bb47' })));
-    }
-    get hostElement() { return this; }
-    static get style() { return IxFormFieldStyle0; }
-}, [1, "ix-form-field", {
-        "label": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ix-form-field"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ix-form-field":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormField);
-            }
-            break;
-    } });
-}
-
-const IxFormField = FormField;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxFormField, defineCustomElement };
-
-//# sourceMappingURL=ix-form-field.js.map

package/components/ix-form-field.js.map

@@ -1 +0,0 @@
-{"file":"ix-form-field.js","mappings":";;AAAA,MAAM,YAAY,GAAG,usSAAusS,CAAC;AAC7tS,0BAAe,YAAY;;MCcd,SAAS;;;;;;;IAQpB,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KAChD;IAED,iBAAiB,MAAK;IAEtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,IACT,aAAO,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,IACxD,IAAI,EACR,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field/form-field.scss?tag=ix-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'components/form/input';\n\n:host {\n  display: contents;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-form-field',\n  styleUrl: 'form-field.scss',\n  shadow: true,\n})\nexport class FormField {\n  @Element() hostElement!: HTMLIxFormFieldElement;\n\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input');\n  }\n\n  componentWillLoad() {}\n\n  render() {\n    return (\n      <Host>\n        {this.label ? (\n          <label htmlFor={this.inputElement.id}>{this.label}</label>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-modal-example.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface IxModalExample extends Components.IxModalExample, HTMLElement {}
-export const IxModalExample: {
-    prototype: IxModalExample;
-    new (): IxModalExample;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/ix-modal-example.js

@@ -1,58 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import './animation.js';
-import { d as dismissModal, c as closeModal } from './modal.js';
-import { d as defineCustomElement$4 } from './button.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './spinner.js';
-
-const ModalExample = /*@__PURE__*/ proxyCustomElement(class ModalExample extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-    }
-    dismiss() {
-        dismissModal(this.host);
-    }
-    close() {
-        closeModal(this.host, 'Done!');
-    }
-    render() {
-        return (h(Host, { key: 'a93b508a6983b97ab3d00fb50c431149a12b1c3a' }, h("div", { key: '0331662e2731d9bbbd5b7cec71d3985e18933ba4' }, h("div", { key: '62fe35ecda14d64395059081baa1ff3751800f13', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '6108daf9af88612fa5f2785a807309c51c8a5983', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: 'ea92bf633a158737f1d4f06b8e68229013f41eb9', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: '6d0e125b9b454d3bc2aa0afa83fa8b7d5b900d3d', class: "modal-footer" }, h("ix-button", { key: 'aa0bb2977686f8118b3eea8217588a20bbe7adb7', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: '77950c33df17b1d9201039fc1431b14fe82361e1', onClick: () => this.close() }, "OK")))));
-    }
-    get host() { return this; }
-}, [0, "ix-modal-example"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ix-modal-example", "ix-button", "ix-icon-button", "ix-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ix-modal-example":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ModalExample);
-            }
-            break;
-        case "ix-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ix-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ix-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const IxModalExample = ModalExample;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxModalExample, defineCustomElement };
-
-//# sourceMappingURL=ix-modal-example.js.map

package/components/ix-modal-example.js.map

@@ -1 +0,0 @@
-{"file":"ix-modal-example.js","mappings":";;;;;;;MAea,YAAY;;;;;IAGf,OAAO;QACb,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACzB;IAEO,KAAK;QACX,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;KAChC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DACE,4DAAK,KAAK,EAAC,cAAc,wBAEvB,kGAEE,KAAK,QACL,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,GACb,CACd,EACN,4DAAK,KAAK,EAAC,YAAY,+BAA+B,EACtD,4DAAK,KAAK,EAAC,cAAc,IACvB,kEAAW,OAAO,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,aAEpC,EACZ,kEAAW,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,SAAgB,CAClD,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/playground/example-modal.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host } from '@stencil/core';\nimport { closeModal, dismissModal } from '../utils/modal';\n\n@Component({\n  tag: 'ix-modal-example',\n})\nexport class ModalExample {\n  @Element() host!: HTMLIxModalExampleElement;\n\n  private dismiss() {\n    dismissModal(this.host);\n  }\n\n  private close() {\n    closeModal(this.host, 'Done!');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div class=\"modal-header\">\n            Message headline\n            <ix-icon-button\n              data-close-button\n              ghost\n              icon={'close'}\n              onClick={() => this.dismiss()}\n            ></ix-icon-button>\n          </div>\n          <div class=\"modal-body\">Message text lorem ipsum</div>\n          <div class=\"modal-footer\">\n            <ix-button outline onClick={() => this.dismiss()}>\n              Cancel\n            </ix-button>\n            <ix-button onClick={() => this.close()}>OK</ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-playground-internal.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface IxPlaygroundInternal extends Components.IxPlaygroundInternal, HTMLElement {}
-export const IxPlaygroundInternal: {
-    prototype: IxPlaygroundInternal;
-    new (): IxPlaygroundInternal;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/ix-playground-internal.js

@@ -1,35 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const playgroundCss = ".sc-ix-playground-internal-h{display:block;position:relative;width:100vw;height:100vh;padding:0rem 0rem 0rem 0rem}";
-const IxPlaygroundInternalStyle0 = playgroundCss;
-
-const PlaygroundInternal = /*@__PURE__*/ proxyCustomElement(class PlaygroundInternal extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-    }
-    render() {
-        return h(Host, { key: 'cb88d03e375d222d5903d13ca1fc154d9af86898' });
-    }
-    static get style() { return IxPlaygroundInternalStyle0; }
-}, [2, "ix-playground-internal"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ix-playground-internal"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ix-playground-internal":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PlaygroundInternal);
-            }
-            break;
-    } });
-}
-
-const IxPlaygroundInternal = PlaygroundInternal;
-const defineCustomElement = defineCustomElement$1;
-
-export { IxPlaygroundInternal, defineCustomElement };
-
-//# sourceMappingURL=ix-playground-internal.js.map

package/components/ix-playground-internal.js.map

@@ -1 +0,0 @@
-{"file":"ix-playground-internal.js","mappings":";;AAAA,MAAM,aAAa,GAAG,oHAAoH,CAAC;AAC3I,mCAAe,aAAa;;MCkBf,kBAAkB;;;;;IAC7B,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAQ,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/playground/playground.scss?tag=ix-playground-internal&encapsulation=scoped","src/components/playground/playground.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n:host {\n  display: block;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n  padding: 0rem 0rem 0rem 0rem;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENxSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/** @internal */\n@Component({\n  tag: 'ix-playground-internal',\n  styleUrl: 'playground.scss',\n  // shadow: true,\n  // Set scoped=true and shadow=false to test global styles like checkbox etc\n  scoped: true,\n})\nexport class PlaygroundInternal {\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}