diff --git a/.gitignore b/.gitignore index 639fa2ea00a..56c2a0f1c21 100644 --- a/.gitignore +++ b/.gitignore @@ -147,6 +147,7 @@ yarn-error.log* ### # Build output ## +packages/core/components/ packages/*/dist/ packages/*/www/ packages/*/loader/ diff --git a/packages/angular-test-app/package.json b/packages/angular-test-app/package.json index 8002d274d2d..88920f00481 100644 --- a/packages/angular-test-app/package.json +++ b/packages/angular-test-app/package.json @@ -18,7 +18,7 @@ "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", - "@siemens/ix-icons": "^1.2.0", + "@siemens/ix-icons": "2.0.0-beta.0", "@siemens/ix": "~2.0.0-beta.1", "@siemens/ix-aggrid": "~2.0.0-beta.1", "@siemens/ix-angular": "~2.0.0-beta.1", diff --git a/packages/angular-test-app/src/styles.scss b/packages/angular-test-app/src/styles.scss index d0814fd037f..57bf4dba678 100644 --- a/packages/angular-test-app/src/styles.scss +++ b/packages/angular-test-app/src/styles.scss @@ -14,7 +14,6 @@ @import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css'; @import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; -@import '@siemens/ix-icons/dist/css/ix-icons.css'; @import './preview-examples/placeholder-logo.css'; diff --git a/packages/angular/ng-package.json b/packages/angular/ng-package.json index 1e894a8d1d1..e8794d81f3f 100644 --- a/packages/angular/ng-package.json +++ b/packages/angular/ng-package.json @@ -5,5 +5,5 @@ "lib": { "entryFile": "src/index.ts" }, - "allowedNonPeerDependencies": ["tslib", "@siemens/ix", "@siemens/ix-icons"] + "allowedNonPeerDependencies": ["tslib", "@siemens/ix"] } diff --git a/packages/angular/package.json b/packages/angular/package.json index 212b4c181f8..2f3504594d4 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -16,11 +16,11 @@ }, "license": "MIT", "dependencies": { - "@siemens/ix": "~2.0.0-beta.1", - "@siemens/ix-icons": "^1.2.0" + "@siemens/ix": "~2.0.0-beta.1" }, "peerDependencies": { - "@angular/core": ">=13.3.12" + "@angular/core": ">=13.3.12", + "@siemens/ix-icons": "2.0.0-beta.0" }, "devDependencies": { "@angular/common": "v13-lts", diff --git a/packages/angular/src/app-initialize.ts b/packages/angular/src/app-initialize.ts index e88c1bf3be7..a7a1747b555 100644 --- a/packages/angular/src/app-initialize.ts +++ b/packages/angular/src/app-initialize.ts @@ -7,12 +7,13 @@ * LICENSE file in the root directory of this source tree. */ +import { defineCustomElements as iconsDefineCustomElements } from '@siemens/ix-icons/loader'; import { applyPolyfills, defineCustomElements } from '@siemens/ix/loader'; let didInitialize = false; export const appInitialize = (doc: Document) => { - return () => { + return async () => { const win: Window | undefined = doc.defaultView as any; if (win && typeof (window as any) !== 'undefined') { if (didInitialize) { @@ -21,9 +22,9 @@ export const appInitialize = (doc: Document) => { didInitialize = true; - applyPolyfills().then(() => { - return defineCustomElements(); - }); + await applyPolyfills(); + await iconsDefineCustomElements(); + await defineCustomElements(); } }; }; diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index ebcfa2be82b..abdcafc9d6f 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -985,28 +985,6 @@ export declare interface IxGroupItem extends Components.IxGroupItem { } -@ProxyCmp({ - inputs: ['color', 'name', 'size'] -}) -@Component({ - selector: 'ix-icon', - changeDetection: ChangeDetectionStrategy.OnPush, - template: '', - // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'name', 'size'], -}) -export class IxIcon { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - - -export declare interface IxIcon extends Components.IxIcon {} - - @ProxyCmp({ inputs: ['color', 'disabled', 'ghost', 'icon', 'loading', 'outline', 'oval', 'size', 'type', 'variant'] }) diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts index 3ff4b7cdec7..a6dfb8ea860 100644 --- a/packages/angular/src/declare-components.ts +++ b/packages/angular/src/declare-components.ts @@ -39,7 +39,6 @@ export const DIRECTIVES = [ d.IxGroup, d.IxGroupContextMenu, d.IxGroupItem, - d.IxIcon, d.IxIconButton, d.IxIconToggleButton, d.IxInputGroup, diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts index b994fb0a681..95f91454a8a 100644 --- a/packages/angular/src/index.ts +++ b/packages/angular/src/index.ts @@ -11,6 +11,7 @@ export * from '@siemens/ix'; export * from './boolean-value-accessor'; export * from './components'; export * from './dropdown/trigger.directive'; +export { IxIcon } from './ix-icon'; export * from './modal'; export * from './module'; export * from './select-value-accessor'; diff --git a/packages/angular/src/ix-icon.ts b/packages/angular/src/ix-icon.ts new file mode 100644 index 00000000000..8a957a07e64 --- /dev/null +++ b/packages/angular/src/ix-icon.ts @@ -0,0 +1,38 @@ +/* + * 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 { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, +} from '@angular/core'; +import type { Components } from '@siemens/ix'; +import { ProxyCmp } from './angular-component-lib/utils'; + +export declare interface IxIcon extends Components.IxIcon {} + +@ProxyCmp({ + defineCustomElementFn: undefined, + inputs: ['color', 'name'], +}) +@Component({ + selector: 'ix-icon', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + inputs: ['color', 'name'], +}) +export class IxIcon { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts index 947a2011fe2..b055bea00d5 100644 --- a/packages/angular/src/module.ts +++ b/packages/angular/src/module.ts @@ -17,17 +17,18 @@ import { import { appInitialize } from './app-initialize'; import { DIRECTIVES } from './declare-components'; import { IxDropdownTriggerDirective } from './dropdown/trigger.directive'; +import { IxIcon } from './ix-icon'; import { ModalService } from './modal'; import { SelectValueAccessor } from './select-value-accessor'; import { BooleanValueAccessor } from './boolean-value-accessor'; import { ThemeService } from './theme'; import { ToastService } from './toast'; import * as tree from './tree'; - const DECLARATIONS = [ ...DIRECTIVES, tree.IxTree, IxDropdownTriggerDirective, + IxIcon, SelectValueAccessor, BooleanValueAccessor ]; diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index e55bcf917fb..2bbc2334439 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -27,14 +27,12 @@ "dependencies": [ "ix-card", "ix-card-content", - "ix-icon", "ix-typography" ], "dependencyGraph": { "ix-action-card": [ "ix-card", "ix-card-content", - "ix-icon", "ix-typography" ] }, @@ -184,12 +182,10 @@ ], "ix-burger-menu": [ "ix-icon-button", - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-basic-navigation": [ "ix-application-header" @@ -315,12 +311,10 @@ ], "ix-burger-menu": [ "ix-icon-button", - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -427,12 +421,10 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon", "ix-typography" ], "dependencyGraph": { "ix-blind": [ - "ix-icon", "ix-typography" ] }, @@ -613,11 +605,7 @@ "ix-dropdown-item", "ix-breadcrumb-item" ], - "ix-dropdown-item": [ - "ix-icon" - ], "ix-breadcrumb-item": [ - "ix-icon", "ix-spinner" ] }, @@ -737,12 +725,10 @@ "ix-breadcrumb" ], "dependencies": [ - "ix-icon", "ix-spinner" ], "dependencyGraph": { "ix-breadcrumb-item": [ - "ix-icon", "ix-spinner" ], "ix-breadcrumb": [ @@ -815,13 +801,11 @@ "ix-upload" ], "dependencies": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "dependencyGraph": { "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-card-list": [ "ix-button" @@ -1105,13 +1089,8 @@ "dependents": [ "ix-push-card" ], - "dependencies": [ - "ix-icon" - ], + "dependencies": [], "dependencyGraph": { - "ix-card-accordion": [ - "ix-icon" - ], "ix-push-card": [ "ix-card-accordion" ] @@ -1187,7 +1166,6 @@ "dependencies": [ "ix-card", "ix-card-content", - "ix-icon", "ix-icon-button", "ix-typography", "ix-button" @@ -1196,18 +1174,15 @@ "ix-card-list": [ "ix-card", "ix-card-content", - "ix-icon", "ix-icon-button", "ix-typography", "ix-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -1434,7 +1409,6 @@ "dependents": [], "dependencies": [ "ix-icon-button", - "ix-icon", "ix-filter-chip", "ix-dropdown", "ix-spinner" @@ -1442,14 +1416,12 @@ "dependencyGraph": { "ix-category-filter": [ "ix-icon-button", - "ix-icon", "ix-filter-chip", "ix-dropdown", "ix-spinner" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-filter-chip": [ "ix-icon-button" @@ -1701,17 +1673,14 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon-button", - "ix-icon" + "ix-icon-button" ], "dependencyGraph": { "ix-chip": [ - "ix-icon-button", - "ix-icon" + "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -2202,8 +2171,7 @@ "ix-typography" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -2316,24 +2284,20 @@ "ix-date-time-card", "ix-icon-button", "ix-button", - "ix-dropdown", - "ix-icon" + "ix-dropdown" ], "dependencyGraph": { "ix-date-picker": [ "ix-date-time-card", "ix-icon-button", "ix-button", - "ix-dropdown", - "ix-icon" + "ix-dropdown" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-datetime-picker": [ "ix-date-picker" @@ -2660,16 +2624,13 @@ "ix-date-time-card", "ix-icon-button", "ix-button", - "ix-dropdown", - "ix-icon" + "ix-dropdown" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-time-picker": [ "ix-date-time-card", @@ -3099,8 +3060,7 @@ "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -3558,24 +3518,20 @@ "dependents": [], "dependencies": [ "ix-button", - "ix-icon", "ix-icon-button", "ix-dropdown" ], "dependencyGraph": { "ix-dropdown-button": [ "ix-button", - "ix-icon", "ix-icon-button", "ix-dropdown" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -3813,13 +3769,8 @@ "ix-select-item", "ix-split-button-item" ], - "dependencies": [ - "ix-icon" - ], + "dependencies": [], "dependencyGraph": { - "ix-dropdown-item": [ - "ix-icon" - ], "ix-breadcrumb": [ "ix-dropdown-item" ], @@ -3990,19 +3941,16 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon", "ix-typography", "ix-button" ], "dependencyGraph": { "ix-empty-state": [ - "ix-icon", "ix-typography", "ix-button" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -4226,14 +4174,8 @@ "docsTags": [], "encapsulation": "shadow", "dependents": [], - "dependencies": [ - "ix-icon" - ], - "dependencyGraph": { - "ix-event-list-item": [ - "ix-icon" - ] - }, + "dependencies": [], + "dependencyGraph": {}, "props": [ { "name": "chevron", @@ -4349,8 +4291,7 @@ "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -4469,8 +4410,7 @@ "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-category-filter": [ "ix-filter-chip" @@ -4558,8 +4498,7 @@ "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -4728,13 +4667,11 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon", "ix-group-context-menu", "ix-group-item" ], "dependencyGraph": { "ix-group": [ - "ix-icon", "ix-group-context-menu", "ix-group-item" ], @@ -4742,11 +4679,7 @@ "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" - ], - "ix-group-item": [ - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -4924,8 +4857,7 @@ "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-group": [ "ix-group-context-menu" @@ -4954,13 +4886,8 @@ "dependents": [ "ix-group" ], - "dependencies": [ - "ix-icon" - ], + "dependencies": [], "dependencyGraph": { - "ix-group-item": [ - "ix-icon" - ], "ix-group": [ "ix-group-item" ] @@ -5144,13 +5071,11 @@ "ix-toast" ], "dependencies": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "dependencyGraph": { "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-burger-menu": [ "ix-icon-button" @@ -5455,13 +5380,11 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "dependencyGraph": { "ix-icon-toggle-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -5677,14 +5600,8 @@ ], "encapsulation": "shadow", "dependents": [], - "dependencies": [ - "ix-icon" - ], - "dependencyGraph": { - "ix-key-value": [ - "ix-icon" - ] - }, + "dependencies": [], + "dependencyGraph": {}, "props": [ { "name": "icon", @@ -5827,14 +5744,8 @@ "docsTags": [], "encapsulation": "shadow", "dependents": [], - "dependencies": [ - "ix-icon" - ], - "dependencyGraph": { - "ix-kpi": [ - "ix-icon" - ] - }, + "dependencies": [], + "dependencyGraph": {}, "props": [ { "name": "label", @@ -6041,14 +5952,8 @@ ], "encapsulation": "shadow", "dependents": [], - "dependencies": [ - "ix-icon" - ], - "dependencyGraph": { - "ix-link-button": [ - "ix-icon" - ] - }, + "dependencies": [], + "dependencyGraph": {}, "props": [ { "name": "disabled", @@ -6146,20 +6051,17 @@ "ix-icon-button" ], "ix-map-navigation-overlay": [ - "ix-icon", "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-application-header": [ "ix-burger-menu" ], "ix-burger-menu": [ "ix-icon-button", - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -6326,17 +6228,14 @@ "ix-map-navigation" ], "dependencies": [ - "ix-icon", "ix-icon-button" ], "dependencyGraph": { "ix-map-navigation-overlay": [ - "ix-icon", "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-map-navigation": [ "ix-map-navigation-overlay" @@ -6433,15 +6332,10 @@ ], "ix-burger-menu": [ "ix-icon-button", - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" - ], - "ix-menu-item": [ - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -6845,11 +6739,7 @@ "ix-tabs" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" - ], - "ix-tabs": [ - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -6975,25 +6865,21 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon", "ix-typography", "ix-icon-button", "ix-button" ], "dependencyGraph": { "ix-menu-about-news": [ - "ix-icon", "ix-typography", "ix-icon-button", "ix-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -7150,9 +7036,6 @@ ], "ix-menu-avatar-item": [ "ix-dropdown-item" - ], - "ix-dropdown-item": [ - "ix-icon" ] }, "props": [ @@ -7287,9 +7170,6 @@ "ix-menu-avatar-item": [ "ix-dropdown-item" ], - "ix-dropdown-item": [ - "ix-icon" - ], "ix-menu-avatar": [ "ix-menu-avatar-item" ] @@ -7365,7 +7245,6 @@ "dependents": [], "dependencies": [ "ix-menu-item", - "ix-icon", "ix-dropdown", "ix-dropdown-item", "ix-typography", @@ -7374,17 +7253,10 @@ "dependencyGraph": { "ix-menu-category": [ "ix-menu-item", - "ix-icon", "ix-dropdown", "ix-dropdown-item", "ix-typography", "ix-divider" - ], - "ix-menu-item": [ - "ix-icon" - ], - "ix-dropdown-item": [ - "ix-icon" ] }, "props": [ @@ -7465,13 +7337,8 @@ "ix-menu", "ix-menu-category" ], - "dependencies": [ - "ix-icon" - ], + "dependencies": [], "dependencyGraph": { - "ix-menu-item": [ - "ix-icon" - ], "ix-menu": [ "ix-menu-item" ], @@ -7639,11 +7506,7 @@ "ix-tabs" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" - ], - "ix-tabs": [ - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -7769,17 +7632,14 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon", "ix-icon-button" ], "dependencyGraph": { "ix-message-bar": [ - "ix-icon", "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -8123,12 +7983,10 @@ "ix-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [], @@ -8186,19 +8044,16 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-icon", "ix-typography", "ix-icon-button" ], "dependencyGraph": { "ix-modal-header": [ - "ix-icon", "ix-typography", "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -8292,8 +8147,7 @@ "ix-typography", "ix-select", "ix-select-item", - "ix-spinner", - "ix-icon" + "ix-spinner" ], "dependencyGraph": { "ix-pagination": [ @@ -8301,27 +8155,21 @@ "ix-typography", "ix-select", "ix-select-item", - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-select": [ "ix-select-item", "ix-filter-chip", "ix-icon-button", - "ix-icon", "ix-dropdown", "ix-dropdown-item" ], "ix-select-item": [ "ix-dropdown-item" ], - "ix-dropdown-item": [ - "ix-icon" - ], "ix-filter-chip": [ "ix-icon-button" ] @@ -8501,14 +8349,8 @@ "docsTags": [], "encapsulation": "shadow", "dependents": [], - "dependencies": [ - "ix-icon" - ], - "dependencyGraph": { - "ix-pill": [ - "ix-icon" - ] - }, + "dependencies": [], + "dependencyGraph": {}, "props": [ { "name": "alignLeft", @@ -8668,7 +8510,6 @@ "ix-card", "ix-card-content", "ix-card-title", - "ix-icon", "ix-typography", "ix-card-accordion" ], @@ -8677,12 +8518,8 @@ "ix-card", "ix-card-content", "ix-card-title", - "ix-icon", "ix-typography", "ix-card-accordion" - ], - "ix-card-accordion": [ - "ix-icon" ] }, "props": [ @@ -8852,7 +8689,6 @@ "ix-select-item", "ix-filter-chip", "ix-icon-button", - "ix-icon", "ix-dropdown", "ix-dropdown-item" ], @@ -8861,22 +8697,17 @@ "ix-select-item", "ix-filter-chip", "ix-icon-button", - "ix-icon", "ix-dropdown", "ix-dropdown-item" ], "ix-select-item": [ "ix-dropdown-item" ], - "ix-dropdown-item": [ - "ix-icon" - ], "ix-filter-chip": [ "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-pagination": [ "ix-select" @@ -9221,9 +9052,6 @@ "ix-select-item": [ "ix-dropdown-item" ], - "ix-dropdown-item": [ - "ix-icon" - ], "ix-pagination": [ "ix-select-item" ], @@ -9677,12 +9505,10 @@ "ix-dropdown" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -9897,9 +9723,6 @@ "dependencyGraph": { "ix-split-button-item": [ "ix-dropdown-item" - ], - "ix-dropdown-item": [ - "ix-icon" ] }, "deprecation": "since 2.0.0. Use the `ix-dropdown-item` component instead.", @@ -10164,13 +9987,8 @@ "ix-menu-about", "ix-menu-settings" ], - "dependencies": [ - "ix-icon" - ], + "dependencies": [], "dependencyGraph": { - "ix-tabs": [ - "ix-icon" - ], "ix-menu-about": [ "ix-tabs" ], @@ -10388,12 +10206,10 @@ "ix-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-datetime-picker": [ "ix-time-picker" @@ -10665,17 +10481,14 @@ "ix-toast-container" ], "dependencies": [ - "ix-icon", "ix-icon-button" ], "dependencyGraph": { "ix-toast": [ - "ix-icon", "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "ix-toast-container": [ "ix-toast" @@ -10833,12 +10646,10 @@ "ix-toast" ], "ix-toast": [ - "ix-icon", "ix-icon-button" ], "ix-icon-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -11095,13 +10906,11 @@ "encapsulation": "shadow", "dependents": [], "dependencies": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ], "dependencyGraph": { "ix-toggle-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -11406,9 +11215,6 @@ "dependencyGraph": { "ix-tree": [ "ix-tree-item" - ], - "ix-tree-item": [ - "ix-icon" ] }, "props": [ @@ -11544,13 +11350,8 @@ "dependents": [ "ix-tree" ], - "dependencies": [ - "ix-icon" - ], + "dependencies": [], "dependencyGraph": { - "ix-tree-item": [ - "ix-icon" - ], "ix-tree": [ "ix-tree-item" ] @@ -11860,8 +11661,7 @@ "ix-button" ], "ix-button": [ - "ix-spinner", - "ix-icon" + "ix-spinner" ] }, "props": [ @@ -12210,14 +12010,8 @@ "docsTags": [], "encapsulation": "shadow", "dependents": [], - "dependencies": [ - "ix-icon" - ], - "dependencyGraph": { - "ix-workflow-step": [ - "ix-icon" - ] - }, + "dependencies": [], + "dependencyGraph": {}, "props": [ { "name": "clickable", diff --git a/packages/core/package.json b/packages/core/package.json index dc9135d8022..5dd07e96835 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -21,6 +21,7 @@ "files": [ "LICENSE", "README.md", + "components/", "dist/", "loader/", "scss/" @@ -52,7 +53,7 @@ }, "devDependencies": { "@playwright/test": "^1.32.1", - "@siemens/ix-icons": "^1.2.0", + "@siemens/ix-icons": "2.0.0-beta.0", "@stencil-community/eslint-plugin": "^0.5.0", "@stencil-community/postcss": "^2.1.0", "@stencil/angular-output-target": "^0.5.0", @@ -87,7 +88,8 @@ }, "peerDependencies": { "@popperjs/core": "^2.11.0", - "bootstrap": "~5.2.0" + "bootstrap": "~5.2.0", + "@siemens/ix-icons": "2.0.0-beta.0" }, "config": { "commitizen": { diff --git a/packages/core/scripts/custom-elements/custom-elements.d.ts b/packages/core/scripts/custom-elements/custom-elements.d.ts new file mode 100644 index 00000000000..435d9ac9d9b --- /dev/null +++ b/packages/core/scripts/custom-elements/custom-elements.d.ts @@ -0,0 +1,10 @@ +/* + * 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. + */ +export * from '../dist/types/index'; +export * from './index'; diff --git a/packages/core/scripts/custom-elements/package.json b/packages/core/scripts/custom-elements/package.json new file mode 100644 index 00000000000..578e15a91e6 --- /dev/null +++ b/packages/core/scripts/custom-elements/package.json @@ -0,0 +1,8 @@ +{ + "name": "@siemens/ix/components", + "version": "0.0.0", + "main": "./index.js", + "types": "./custom-elements.d.ts", + "private": true, + "sideEffects": false +} diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 521421f7531..ac34c0d1e03 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -402,7 +402,7 @@ export namespace Components { /** * Show icon */ - "icon": string | undefined; + "icon": string; /** * Show chip with outline style */ @@ -3479,7 +3479,7 @@ declare namespace LocalJSX { /** * Show icon */ - "icon"?: string | undefined; + "icon"?: string; /** * Fire event if close button is clicked * @since 1.5.0 diff --git a/packages/core/src/components/blind/blind.tsx b/packages/core/src/components/blind/blind.tsx index 1c6af1e7abc..203c1e5840d 100644 --- a/packages/core/src/components/blind/blind.tsx +++ b/packages/core/src/components/blind/blind.tsx @@ -67,7 +67,7 @@ export class Blind { @Element() hostElement!: HTMLIxBlindElement; private chevronRef: HTMLElement; - private id = ++sequentialInstanceId; + private blindId = ++sequentialInstanceId; constructor() {} @@ -148,14 +148,14 @@ export class Blind { closed: this.collapsed, }} type="button" - aria-labelledby={`ix-blind-header-title-${this.id}`} - aria-controls={`ix-blind-content-section-${this.id}`} + aria-labelledby={`ix-blind-header-title-${this.blindId}`} + aria-controls={`ix-blind-content-section-${this.blindId}`} aria-expanded={a11yBoolean(!this.collapsed)} onClick={(e) => this.onHeaderClick(e)} >
{this.label !== undefined ? ( @@ -213,8 +213,8 @@ export class Blind {
{this.showChevron ? ( diff --git a/packages/core/src/components/button/button-mixin.scss b/packages/core/src/components/button/button-mixin.scss index 8fccbda9074..969ccb07b3b 100644 --- a/packages/core/src/components/button/button-mixin.scss +++ b/packages/core/src/components/button/button-mixin.scss @@ -24,7 +24,6 @@ color: var(--theme-btn-#{$name}--color); --ix-button-color: var(--theme-btn-#{$name}--color); - --ix-icon-color: var(--ix-button-color); @if $enable-border { border-width: var(--theme-btn--border-thickness); diff --git a/packages/core/src/components/card-accordion/card-accordion.tsx b/packages/core/src/components/card-accordion/card-accordion.tsx index e8658eb2b3a..e3cd53f6b60 100644 --- a/packages/core/src/components/card-accordion/card-accordion.tsx +++ b/packages/core/src/components/card-accordion/card-accordion.tsx @@ -78,7 +78,7 @@ export class CardAccordion { aria-controls={getAriaControlsId()} > diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx index 3469176abdc..e890993970b 100644 --- a/packages/core/src/components/category-filter/category-filter.tsx +++ b/packages/core/src/components/category-filter/category-filter.tsx @@ -629,7 +629,7 @@ export class CategoryFilter { }} ghost oval - icon="clear" + icon={'clear'} size="16" > ); diff --git a/packages/core/src/components/chip/chip-mixin.scss b/packages/core/src/components/chip/chip-mixin.scss index 4916ca58278..1830dd2958d 100644 --- a/packages/core/src/components/chip/chip-mixin.scss +++ b/packages/core/src/components/chip/chip-mixin.scss @@ -34,6 +34,7 @@ $border-radius: 100px; } .hidden { + display: none; width: 0px; margin-right: 0px; } diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx index ae755b9b119..e91ceef9d76 100644 --- a/packages/core/src/components/chip/chip.tsx +++ b/packages/core/src/components/chip/chip.tsx @@ -52,7 +52,7 @@ export class Chip { /** * Show icon */ - @Prop() icon: string | undefined; + @Prop() icon: string; /** * Custom color for pill. Only working for `variant='custom'` @@ -79,22 +79,20 @@ export class Chip { private getCloseButton() { return (
- { - { - this.closeChip.emit(event); - event.stopPropagation(); - }} - > - } + { + this.closeChip.emit(event); + event.stopPropagation(); + }} + >
); } @@ -143,7 +141,7 @@ export class Chip { this.backButtonClick.emit()} > diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx index 5292638e0fa..df13a8e9318 100644 --- a/packages/core/src/components/date-picker/date-picker.tsx +++ b/packages/core/src/components/date-picker/date-picker.tsx @@ -469,7 +469,7 @@ export class DatePicker { this.changeMonth(-1)} ghost - icon="chevron-left" + icon={'chevron-left'} variant="primary" class="arrows" > @@ -502,7 +502,7 @@ export class DatePicker { hidden: this.tempYear !== year, arrowPosition: true, }} - name="chevron-right" + name={'chevron-right'} size="12" >
@@ -546,7 +546,7 @@ export class DatePicker { this.changeMonth(1)} ghost - icon="chevron-right" + icon={'chevron-right'} variant="primary" class="arrows" > diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index 071e70272d3..d5941bd4a6a 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -174,7 +174,7 @@ export class Drawer {
this.onCloseClicked()} diff --git a/packages/core/src/components/dropdown-button/dropdown-button.tsx b/packages/core/src/components/dropdown-button/dropdown-button.tsx index 36c23f592a7..7188c55bf48 100644 --- a/packages/core/src/components/dropdown-button/dropdown-button.tsx +++ b/packages/core/src/components/dropdown-button/dropdown-button.tsx @@ -109,7 +109,7 @@ export class DropdownButton { > ) : null}
{this.label}
- +
) : ( diff --git a/packages/core/src/components/dropdown-item/dropdown-item.tsx b/packages/core/src/components/dropdown-item/dropdown-item.tsx index 48fb657946b..abc00ca364f 100644 --- a/packages/core/src/components/dropdown-item/dropdown-item.tsx +++ b/packages/core/src/components/dropdown-item/dropdown-item.tsx @@ -6,7 +6,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import { chevronRightSmall } from '@siemens/ix-icons/icons'; + import { Component, Element, @@ -101,7 +101,7 @@ export class DropdownItem { {this.checked ? ( ) : null} @@ -115,7 +115,10 @@ export class DropdownItem {
{this.isSubMenu ? ( - + ) : null} diff --git a/packages/core/src/components/event-list-item/event-list-item.tsx b/packages/core/src/components/event-list-item/event-list-item.tsx index f2448e88d82..e886dd0af99 100644 --- a/packages/core/src/components/event-list-item/event-list-item.tsx +++ b/packages/core/src/components/event-list-item/event-list-item.tsx @@ -89,7 +89,7 @@ export class EventListItem { {this.chevron && ( diff --git a/packages/core/src/components/expanding-search/expanding-search.tsx b/packages/core/src/components/expanding-search/expanding-search.tsx index 27695ce7f59..f0cdede97a4 100644 --- a/packages/core/src/components/expanding-search/expanding-search.tsx +++ b/packages/core/src/components/expanding-search/expanding-search.tsx @@ -155,7 +155,7 @@ export class ExpandingSearch { {this.isFieldChanged ? ( this.toggleIndex()} diff --git a/packages/core/src/components/group/group-context-menu.tsx b/packages/core/src/components/group/group-context-menu.tsx index 3406a87f843..9ff71a9ea97 100644 --- a/packages/core/src/components/group/group-context-menu.tsx +++ b/packages/core/src/components/group/group-context-menu.tsx @@ -64,7 +64,7 @@ export class GroupContextMenu { class={{ hide: !this.showContextMenu }} size="24" ghost={true} - icon="context-menu" + icon={'context-menu'} > this.onSlotChange()}> diff --git a/packages/core/src/components/group/group.tsx b/packages/core/src/components/group/group.tsx index d6447c38260..4f3a3122ace 100644 --- a/packages/core/src/components/group/group.tsx +++ b/packages/core/src/components/group/group.tsx @@ -214,7 +214,9 @@ export class Group { class={{ hidden: this.slotSize === 0, }} - name={`chevron-${this.collapsed ? 'right' : 'down'}-small`} + name={ + this.collapsed ? 'chevron-right-small' : 'chevron-down-small' + } onClick={(e) => this.onExpandClick(e)} > diff --git a/packages/core/src/components/icon-button/icon-button-mixin.scss b/packages/core/src/components/icon-button/icon-button-mixin.scss index d689cb50764..92f98fb356d 100644 --- a/packages/core/src/components/icon-button/icon-button-mixin.scss +++ b/packages/core/src/components/icon-button/icon-button-mixin.scss @@ -51,7 +51,7 @@ } ix-icon { - color: var(--ix-icon-button-color); + color: var(--ix-icon-button-color, currentColor); margin: 0; } diff --git a/packages/core/src/components/icon-button/test/icon-button.ct.ts b/packages/core/src/components/icon-button/test/icon-button.ct.ts index 347c38a5c7b..e4a25447979 100644 --- a/packages/core/src/components/icon-button/test/icon-button.ct.ts +++ b/packages/core/src/components/icon-button/test/icon-button.ct.ts @@ -17,9 +17,7 @@ test('renders', async ({ mount, page }) => { expect(button.allInnerTexts).not.toEqual('Content'); await expect(button.locator('ix-icon')).toBeVisible(); - await expect(button.locator('ix-icon').locator('i')).toHaveClass( - /glyph-rocket/ - ); + await expect(button.locator('ix-icon').locator('title')).toHaveText('rocket'); }); test('show spinner while loading', async ({ mount, page }) => { diff --git a/packages/core/src/components/kpi/kpi.tsx b/packages/core/src/components/kpi/kpi.tsx index 679f1d7a4da..2f24e18ca01 100644 --- a/packages/core/src/components/kpi/kpi.tsx +++ b/packages/core/src/components/kpi/kpi.tsx @@ -46,7 +46,7 @@ export class Kpi { return ( ); @@ -55,7 +55,7 @@ export class Kpi { return ( ); diff --git a/packages/core/src/components/link-button/link-button.tsx b/packages/core/src/components/link-button/link-button.tsx index e28c0396b03..7db5b9a7776 100644 --- a/packages/core/src/components/link-button/link-button.tsx +++ b/packages/core/src/components/link-button/link-button.tsx @@ -48,7 +48,11 @@ export class LinkButton { href={this.disabled ? undefined : this.url} target={this.target} > - +
this.closeOverlay()} > diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx index a87f1f4dd39..85a73185059 100644 --- a/packages/core/src/components/map-navigation/map-navigation.tsx +++ b/packages/core/src/components/map-navigation/map-navigation.tsx @@ -244,7 +244,7 @@ export class MapNavigation { '' ) : ( @@ -82,7 +82,7 @@ export class MenuAboutNews { { this.show = false; diff --git a/packages/core/src/components/menu-about/menu-about.tsx b/packages/core/src/components/menu-about/menu-about.tsx index 706057cca11..e36e11f0143 100644 --- a/packages/core/src/components/menu-about/menu-about.tsx +++ b/packages/core/src/components/menu-about/menu-about.tsx @@ -124,7 +124,7 @@ export class MenuAbout { this.close.emit({ name: 'ix-menu-about', diff --git a/packages/core/src/components/menu-avatar/menu-avatar.tsx b/packages/core/src/components/menu-avatar/menu-avatar.tsx index 4b4fecc9a1e..1aa0d5312cc 100644 --- a/packages/core/src/components/menu-avatar/menu-avatar.tsx +++ b/packages/core/src/components/menu-avatar/menu-avatar.tsx @@ -90,7 +90,7 @@ export class MenuAvatar { { this.logoutClick.emit(e); }} diff --git a/packages/core/src/components/menu-category/menu-category.tsx b/packages/core/src/components/menu-category/menu-category.tsx index 677c3875673..dbbedd9b414 100644 --- a/packages/core/src/components/menu-category/menu-category.tsx +++ b/packages/core/src/components/menu-category/menu-category.tsx @@ -173,7 +173,7 @@ export class MenuCategory {
{this.label} this.close.emit({ name: 'ix-menu-settings', diff --git a/packages/core/src/components/menu/burger-menu.tsx b/packages/core/src/components/menu/burger-menu.tsx index b35362b02c0..074bcb276e4 100644 --- a/packages/core/src/components/menu/burger-menu.tsx +++ b/packages/core/src/components/menu/burger-menu.tsx @@ -52,7 +52,7 @@ export class BurgerMenu { }} > {this.pinned ? ( - + ) : (
{this.dismissible ? ( { diff --git a/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap b/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap deleted file mode 100644 index 56b800c1183..00000000000 --- a/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap +++ /dev/null @@ -1,15 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ix-message-bar renders 1`] = ` - - - - - -`; diff --git a/packages/core/src/components/message-bar/test/message-bar.spec.tsx b/packages/core/src/components/message-bar/test/message-bar.spec.tsx index d6d992a80b3..2872b272262 100644 --- a/packages/core/src/components/message-bar/test/message-bar.spec.tsx +++ b/packages/core/src/components/message-bar/test/message-bar.spec.tsx @@ -28,10 +28,6 @@ describe('ix-message-bar', () => { ); }); - it('renders', async () => { - expect(page.root).toMatchSnapshot(); - }); - it('closes the alert message bar', async (done) => { messageBar.addEventListener('closedChange', () => { done(); diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index 905624802bb..c26aba6e457 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -142,7 +142,7 @@ export class Modal { */ @Method() async showModal() { - this.dialog.showModal(); + this.dialog?.showModal(); } /** diff --git a/packages/core/src/components/my-component/example-modal.tsx b/packages/core/src/components/my-component/example-modal.tsx index 266fef15c88..b614d462854 100644 --- a/packages/core/src/components/my-component/example-modal.tsx +++ b/packages/core/src/components/my-component/example-modal.tsx @@ -33,7 +33,7 @@ export class ModalExample { this.dismiss()} >
diff --git a/packages/core/src/components/pagination/pagination.tsx b/packages/core/src/components/pagination/pagination.tsx index f124cd7509f..f81d81f03ff 100644 --- a/packages/core/src/components/pagination/pagination.tsx +++ b/packages/core/src/components/pagination/pagination.tsx @@ -213,7 +213,7 @@ export class Pagination { this.decrease()} > @@ -244,7 +244,7 @@ export class Pagination { this.increase()} > diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss index 113bd9e883a..4e6376587a0 100644 --- a/packages/core/src/components/select/select.scss +++ b/packages/core/src/components/select/select.scss @@ -18,6 +18,7 @@ display: inline-block; position: relative; + min-height: 2rem; height: auto; border-radius: var(--theme-input--border-radius); @@ -29,7 +30,6 @@ position: relative; display: flex; align-items: center; - height: auto; background-color: var(--theme-input--background); border: var(--theme-input--border-thickness) solid var(--theme-input--border-color); @@ -95,6 +95,7 @@ position: relative; align-items: flex-start; width: 100%; + height: 100%; .chips { position: relative; @@ -135,39 +136,8 @@ } } - .chevron-down-container { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - min-width: 2rem; - height: 2rem; - - @include hover { - color: var(--theme-color-dynamic--hover); - } - - @include active { - color: var(--theme-color-dynamic--hover); - } - } - - .editable { - .chevron-down-container { - @include hover { - color: var(--theme-color-std-text); - background-color: var( - --theme-btn-invisible-secondary--background--hover - ); - } - - @include active { - color: var(--theme-color-std-text); - background-color: var( - --theme-btn-invisible-secondary--background--active - ); - } - } + .dropdown-visible { + --ix-icon-button-color: var(--theme-color-dynamic--hover); } .add-item { diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index af76bf762c4..196fb563306 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -457,8 +457,6 @@ export class Select {
) : null} {this.disabled || this.readonly ? null : ( -
{ if (this.editable) this.dropdownWrapperRef = ref; }} - > - -
+ > )}
@@ -560,7 +559,7 @@ export class Select { {this.isAddItemVisible() ? ( { const element = page.locator('ix-select'); await expect(element).toHaveClass(/hydrated/); - await page.locator('.chevron-down-container').click(); + await page.locator('[data-select-dropdown]').click(); const dropdown = element.locator('ix-dropdown'); await expect(dropdown).toBeVisible(); @@ -38,7 +38,7 @@ test('editable mode', async ({ mount, page }) => { const element = page.locator('ix-select'); await expect(element).toHaveClass(/hydrated/); - await page.locator('.chevron-down-container').click(); + await page.locator('[data-select-dropdown]').click(); await page.getByTestId('input').fill('Not existing'); const dropdown = element.locator('ix-dropdown'); @@ -51,10 +51,8 @@ test('editable mode', async ({ mount, page }) => { await expect(add).toBeVisible(); await add.click(); - await expect(page.getByTestId('input')).toHaveValue(/Not existing/); - - await page.locator('.chevron-down-container').click(); + await page.locator('[data-select-dropdown]').click(); await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible(); await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible(); @@ -78,14 +76,14 @@ test('single selection', async ({ mount, page }) => { (select: HTMLIxSelectElement) => (select.value = '22') ); - await page.locator('.chevron-down-container').click(); + await page.locator('[data-select-dropdown]').click(); const dropdown = element.locator('ix-dropdown'); await expect(dropdown).toBeVisible(); await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible(); await expect( - page.getByRole('button', { name: 'Item 2' }).locator('i') + page.getByRole('button', { name: 'Item 2' }).locator('ix-icon') ).toBeVisible(); }); @@ -100,7 +98,7 @@ test('multiple selection', async ({ mount, page }) => { `); const element = page.locator('ix-select'); await element.evaluate((select: HTMLIxSelectElement) => (select.value = [])); - await page.locator('.chevron-down-container').click(); + await page.locator('[data-select-dropdown]').click(); const dropdown = element.locator('ix-dropdown'); const chips = element.locator('.chips'); @@ -110,12 +108,12 @@ test('multiple selection', async ({ mount, page }) => { const item1 = element.locator('ix-select-item').nth(0); const item3 = element.locator('ix-select-item').nth(2); await item1.click(); - await page.locator('.chevron-down-container').click(); + await page.locator('[data-select-dropdown]').click(); await item3.click(); - await page.locator('.chevron-down-container').click(); + await page.locator('[data-select-dropdown]').click(); - await expect(item1.locator('i')).toBeVisible(); - await expect(item3.locator('i')).toBeVisible(); + await expect(item1.locator('ix-icon')).toBeVisible(); + await expect(item3.locator('ix-icon')).toBeVisible(); const chip1 = chips.getByTitle('Item 1'); const chip3 = chips.getByTitle('Item 3'); @@ -136,7 +134,7 @@ test('filter', async ({ mount, page }) => { const element = page.locator('ix-select'); await element.evaluate((select: HTMLIxSelectElement) => (select.value = [])); - await page.locator('.chevron-down-container').click(); + await page.locator('[data-select-dropdown]').click(); const dropdown = element.locator('ix-dropdown'); await expect(dropdown).toBeVisible(); diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index 30af28f7990..3f9e20fcfdc 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/packages/core/src/components/tabs/tabs.tsx @@ -19,8 +19,6 @@ import { State, } from '@stencil/core'; -let windowStartSize = window.innerWidth; - @Component({ tag: 'ix-tabs', styleUrl: 'tabs.scss', @@ -68,6 +66,9 @@ export class Tabs { @State() stylePreviousArrow = {}; @State() scrollActionAmount = 0; + + private windowStartSize = window.innerWidth; + private clickAction: { timeout: NodeJS.Timeout; isClick: boolean; @@ -81,9 +82,10 @@ export class Tabs { this.totalItems = 0; this.totalItems = this.getTabs().length; - if (windowStartSize === 0) return (windowStartSize = window.innerWidth); - this.move(windowStartSize - window.innerWidth); - windowStartSize = window.innerWidth; + if (this.windowStartSize === 0) + return (this.windowStartSize = window.innerWidth); + this.move(this.windowStartSize - window.innerWidth); + this.windowStartSize = window.innerWidth; } private getTabs() { @@ -283,7 +285,7 @@ export class Tabs { style={this.stylePreviousArrow} onClick={() => this.move(this.scrollAmount, true)} > - +
this.move(-this.scrollAmount, true)} > - +
); diff --git a/packages/core/src/components/time-picker/time-picker.tsx b/packages/core/src/components/time-picker/time-picker.tsx index 35a3a3aa8dc..62c4c592674 100644 --- a/packages/core/src/components/time-picker/time-picker.tsx +++ b/packages/core/src/components/time-picker/time-picker.tsx @@ -315,7 +315,7 @@ export class TimePicker { size="16" onClick={() => this.updateInput('up', { hours: true })} ghost - icon="chevron-up" + icon={'chevron-up'} variant="primary" class="arrows" > @@ -340,7 +340,7 @@ export class TimePicker { size="16" onClick={() => this.updateInput('down', { hours: true })} ghost - icon="chevron-down" + icon={'chevron-down'} variant="primary" class="arrows" > @@ -357,7 +357,7 @@ export class TimePicker { size="16" onClick={() => this.updateInput('up', { minutes: true })} ghost - icon="chevron-up" + icon={'chevron-up'} variant="primary" class="arrows" > @@ -382,7 +382,7 @@ export class TimePicker { size="16" onClick={() => this.updateInput('down', { minutes: true })} ghost - icon="chevron-down" + icon={'chevron-down'} variant="primary" class="arrows" > @@ -399,7 +399,7 @@ export class TimePicker { size="16" onClick={() => this.updateInput('up', { seconds: true })} ghost - icon="chevron-up" + icon={'chevron-up'} variant="primary" class="arrows" > @@ -424,7 +424,7 @@ export class TimePicker { size="16" onClick={() => this.updateInput('down', { seconds: true })} ghost - icon="chevron-down" + icon={'chevron-down'} variant="primary" class="arrows" > @@ -441,7 +441,7 @@ export class TimePicker { size="16" onClick={() => this.changeReference()} ghost - icon="chevron-up" + icon={'chevron-up'} variant="primary" class="arrows" > @@ -450,7 +450,7 @@ export class TimePicker { size="16" onClick={() => this.changeReference()} ghost - icon="chevron-down" + icon={'chevron-down'} variant="primary" class="arrows" > diff --git a/packages/core/src/components/toast/test/toast.spec.tsx b/packages/core/src/components/toast/test/toast.spec.tsx deleted file mode 100644 index b65fdc1dfaa..00000000000 --- a/packages/core/src/components/toast/test/toast.spec.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/* - * 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 { newSpecPage } from '@stencil/core/testing'; -import '@testing-library/jest-dom'; -import { Toast } from '../toast'; - -describe('toast', () => { - it('renders', async () => { - const page = await newSpecPage({ - components: [Toast], - html: 'Test message', - }); - - await page.waitForChanges(); - - expect(page.root).toEqualHtml(` - - -
-
- -
-
-
- Test title -
-
- -
-
-
- -
-
-
- - Test message - - `); - }); -}); diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index bc0cc52c194..eae59b6003f 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -133,7 +133,7 @@ export class Toast {
this.closeToast.emit()} diff --git a/packages/core/src/components/tree-item/tree-item.tsx b/packages/core/src/components/tree-item/tree-item.tsx index f56640f2719..d52838884e1 100644 --- a/packages/core/src/components/tree-item/tree-item.tsx +++ b/packages/core/src/components/tree-item/tree-item.tsx @@ -57,7 +57,7 @@ export class TreeItem { > {this.hasChildren ? ( -