From a0316f59944dc93e8bc1e0009e8a45c9ad4f275f Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Mon, 23 Sep 2024 12:38:04 +0200 Subject: [PATCH 01/28] fix(core/dropdown): clean up disconnected dropdowns (#1483) Co-authored-by: AndreasBerliner <41509230+AndreasBerliner@users.noreply.github.com> Co-authored-by: Daniel Leroux --- .changeset/tricky-hornets-work.md | 5 +++ .../dropdown/dropdown-controller.ts | 18 ++++++++++- .../components/dropdown/test/dropdown.ct.ts | 32 +++++++++++++------ 3 files changed, 45 insertions(+), 10 deletions(-) create mode 100644 .changeset/tricky-hornets-work.md diff --git a/.changeset/tricky-hornets-work.md b/.changeset/tricky-hornets-work.md new file mode 100644 index 00000000000..b4b07aa49be --- /dev/null +++ b/.changeset/tricky-hornets-work.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core/dropdown): clean up disconnected dropdowns diff --git a/packages/core/src/components/dropdown/dropdown-controller.ts b/packages/core/src/components/dropdown/dropdown-controller.ts index 8f1336f8dfa..b0d356d102b 100644 --- a/packages/core/src/components/dropdown/dropdown-controller.ts +++ b/packages/core/src/components/dropdown/dropdown-controller.ts @@ -65,7 +65,23 @@ class DropdownController { } disconnected(dropdown: DropdownInterface) { - this.dropdowns.delete(dropdown.getId()); + const id = dropdown.getId(); + this.removeFromSubmenuIds(id); + this.dropdowns.delete(id); + } + + removeFromSubmenuIds(id: string) { + this.dropdowns.forEach((dropdown) => { + const submenuIds = this.submenuIds[dropdown.getId()]; + if (submenuIds) { + const index = submenuIds.indexOf(id); + if (index > -1) { + submenuIds.splice(index, 1); + } + } + }); + + delete this.submenuIds[id]; } discoverSubmenus() { diff --git a/packages/core/src/components/dropdown/test/dropdown.ct.ts b/packages/core/src/components/dropdown/test/dropdown.ct.ts index 70fc51582f9..8bae36fc263 100644 --- a/packages/core/src/components/dropdown/test/dropdown.ct.ts +++ b/packages/core/src/components/dropdown/test/dropdown.ct.ts @@ -1,12 +1,3 @@ -/* - * 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. - */ - /* * SPDX-FileCopyrightText: 2023 Siemens AG * @@ -634,6 +625,29 @@ test.describe('resolve during element connect', () => { }); }); +test('Child dropdown disconnects', async ({ mount, page }) => { + await mount(`Open + + Item level 1 + + Item level 2 + + `); + const trigger = page.locator('ix-button').first(); + await trigger.click(); + const dropdown = page.locator('ix-dropdown').first(); + + await expect(dropdown).toBeVisible(); + + await dropdown.evaluate((dd) => { + dd.removeChild(dd.querySelector('ix-dropdown-button')); + }); + + await trigger.click(); + await trigger.click(); + await expect(dropdown).toBeVisible(); +}); + test.describe('A11y', () => { test.describe('Keyboard navigation', () => { test.beforeEach(async ({ page, mount }) => { From c37edc05024f1d4ad3ca080f4d2d6a0eee35b765 Mon Sep 17 00:00:00 2001 From: kathrinschalber <123640803+kathrinschalber@users.noreply.github.com> Date: Tue, 24 Sep 2024 11:09:09 +0200 Subject: [PATCH 02/28] Docs/uxt migration (#1426) Co-authored-by: Betti <167863867+bettiifr@users.noreply.github.com> Co-authored-by: tokyojen <143795032+tokyojen@users.noreply.github.com> --- .../docs/migration/uxt-ix-css.css | 1 + packages/documentation/docs/migration/uxt.md | 108 ++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 packages/documentation/docs/migration/uxt-ix-css.css create mode 100644 packages/documentation/docs/migration/uxt.md diff --git a/packages/documentation/docs/migration/uxt-ix-css.css b/packages/documentation/docs/migration/uxt-ix-css.css new file mode 100644 index 00000000000..406b077dc18 --- /dev/null +++ b/packages/documentation/docs/migration/uxt-ix-css.css @@ -0,0 +1 @@ +.uxt.uxt-defaults.ix .breadcrumb .breadcrumb__item>*,.mdsp.mdsp-defaults.ix .breadcrumb .breadcrumb__item>*{font-weight:bold}.uxt.uxt-defaults.ix .breadcrumb .breadcrumb__item:not(:last-child)::after,.mdsp.mdsp-defaults.ix .breadcrumb .breadcrumb__item:not(:last-child)::after{color:rgba(var(--color-font), 0.6);font-size:16px}.uxt.uxt-defaults.ix .breadcrumb.breadcrumb--centered,.mdsp.mdsp-defaults.ix .breadcrumb.breadcrumb--centered{gap:4px}.uxt.uxt-defaults.ix .breadcrumb.breadcrumb--centered .breadcrumb__item:not(:first-child)::before,.mdsp.mdsp-defaults.ix .breadcrumb.breadcrumb--centered .breadcrumb__item:not(:first-child)::before{color:rgba(var(--color-font), 0.6);font-size:16px}.uxt.uxt-defaults.ix .breadcrumb.breadcrumb--centered .breadcrumb__item:not(:first-child):after,.mdsp.mdsp-defaults.ix .breadcrumb.breadcrumb--centered .breadcrumb__item:not(:first-child):after{content:""}.uxt.uxt-defaults.ix .buttonSplitWrapper .buttonSplit,.mdsp.mdsp-defaults.ix .buttonSplitWrapper .buttonSplit{background-color:rgba(var(--color-base950), 1);box-shadow:0 4px 10px 0px rgba(var(--color-base000), 0.2)}.uxt.uxt-defaults.ix .buttonSplitWrapper .buttonSplit .button--split,.mdsp.mdsp-defaults.ix .buttonSplitWrapper .buttonSplit .button--split{color:rgba(var(--color-font), 1);font-weight:normal;background-color:unset}.uxt.uxt-defaults.ix .buttonSplitWrapper .buttonSplit .button--split:hover,.mdsp.mdsp-defaults.ix .buttonSplitWrapper .buttonSplit .button--split:hover{background-color:rgba(var(--color-base800), 1)}.uxt.uxt-defaults.ix .buttonGroup .button--secondary:hover,.mdsp.mdsp-defaults.ix .buttonGroup .button--secondary:hover{border-color:rgba(var(--color-button-secondary-border-hover));color:rgba(var(--color-button-secondary-color-hover), 1);background-color:rgb(var(--color-button-secondary-background-hover))}.uxt.uxt-defaults.ix .buttonGroup .button--secondary:active,.mdsp.mdsp-defaults.ix .buttonGroup .button--secondary:active{background-color:rgb(var(--color-button-secondary-background-active))}.uxt.uxt-defaults.ix .buttonGroup .button:first-child,.mdsp.mdsp-defaults.ix .buttonGroup .button:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.uxt.uxt-defaults.ix .buttonGroup .button:last-child,.mdsp.mdsp-defaults.ix .buttonGroup .button:last-child{border-bottom-right-radius:0;border-top-right-radius:0}.uxt.uxt-defaults.ix a.button,.uxt.uxt-defaults.ix .button,.mdsp.mdsp-defaults.ix a.button,.mdsp.mdsp-defaults.ix .button{border-radius:0;font-weight:bold}.uxt.uxt-defaults.ix a.button--primary[type=submit]:hover,.uxt.uxt-defaults.ix a.button--primary:hover,.uxt.uxt-defaults.ix .button--primary[type=submit]:hover,.uxt.uxt-defaults.ix .button--primary:hover,.mdsp.mdsp-defaults.ix a.button--primary[type=submit]:hover,.mdsp.mdsp-defaults.ix a.button--primary:hover,.mdsp.mdsp-defaults.ix .button--primary[type=submit]:hover,.mdsp.mdsp-defaults.ix .button--primary:hover{background-color:rgba(var(--color-primary-dark), 1)}.uxt.uxt-defaults.ix a.button--primary[type=submit]:active,.uxt.uxt-defaults.ix a.button--primary:active,.uxt.uxt-defaults.ix .button--primary[type=submit]:active,.uxt.uxt-defaults.ix .button--primary:active,.mdsp.mdsp-defaults.ix a.button--primary[type=submit]:active,.mdsp.mdsp-defaults.ix a.button--primary:active,.mdsp.mdsp-defaults.ix .button--primary[type=submit]:active,.mdsp.mdsp-defaults.ix .button--primary:active{background-color:rgba(var(--color-button-primary-background-active), 1)}.uxt.uxt-defaults.ix a.button--primary[type=submit].is-disabled,.uxt.uxt-defaults.ix a.button--primary.is-disabled,.uxt.uxt-defaults.ix .button--primary[type=submit].is-disabled,.uxt.uxt-defaults.ix .button--primary.is-disabled,.mdsp.mdsp-defaults.ix a.button--primary[type=submit].is-disabled,.mdsp.mdsp-defaults.ix a.button--primary.is-disabled,.mdsp.mdsp-defaults.ix .button--primary[type=submit].is-disabled,.mdsp.mdsp-defaults.ix .button--primary.is-disabled{background-color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button--primary[type=submit].is-disabled:hover,.uxt.uxt-defaults.ix a.button--primary.is-disabled:hover,.uxt.uxt-defaults.ix .button--primary[type=submit].is-disabled:hover,.uxt.uxt-defaults.ix .button--primary.is-disabled:hover,.mdsp.mdsp-defaults.ix a.button--primary[type=submit].is-disabled:hover,.mdsp.mdsp-defaults.ix a.button--primary.is-disabled:hover,.mdsp.mdsp-defaults.ix .button--primary[type=submit].is-disabled:hover,.mdsp.mdsp-defaults.ix .button--primary.is-disabled:hover{background-color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button.button--secondary,.uxt.uxt-defaults.ix .button.button--secondary,.mdsp.mdsp-defaults.ix a.button.button--secondary,.mdsp.mdsp-defaults.ix .button.button--secondary{background-color:rgba(var(--color-button-secondary-background), 1);border-color:rgba(var(--color-primary), 1)}.uxt.uxt-defaults.ix a.button.button--secondary:hover,.uxt.uxt-defaults.ix .button.button--secondary:hover,.mdsp.mdsp-defaults.ix a.button.button--secondary:hover,.mdsp.mdsp-defaults.ix .button.button--secondary:hover{border-color:rgba(var(--color-button-secondary-border-hover));color:rgba(var(--color-button-secondary-color-hover), 1);background-color:rgb(var(--color-button-secondary-background-hover))}.uxt.uxt-defaults.ix a.button.button--secondary:active,.uxt.uxt-defaults.ix .button.button--secondary:active,.mdsp.mdsp-defaults.ix a.button.button--secondary:active,.mdsp.mdsp-defaults.ix .button.button--secondary:active{background-color:rgb(var(--color-button-secondary-background-active))}.uxt.uxt-defaults.ix a.button.button--secondary.is-disabled,.uxt.uxt-defaults.ix .button.button--secondary.is-disabled,.mdsp.mdsp-defaults.ix a.button.button--secondary.is-disabled,.mdsp.mdsp-defaults.ix .button.button--secondary.is-disabled{border-color:rgba(var(--color-button-primary-background-disabled));color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button.button--secondary.is-disabled:hover,.uxt.uxt-defaults.ix .button.button--secondary.is-disabled:hover,.mdsp.mdsp-defaults.ix a.button.button--secondary.is-disabled:hover,.mdsp.mdsp-defaults.ix .button.button--secondary.is-disabled:hover{border-color:rgba(var(--color-button-primary-background-disabled));color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button.button--secondary.is-dangerButton:hover,.uxt.uxt-defaults.ix .button.button--secondary.is-dangerButton:hover,.mdsp.mdsp-defaults.ix a.button.button--secondary.is-dangerButton:hover,.mdsp.mdsp-defaults.ix .button.button--secondary.is-dangerButton:hover{border-color:rgba(var(--color-dangerPrimary), 1);color:rgba(var(--color-font-contrast), 1)}.uxt.uxt-defaults.ix a.button--ghost.is-disabled,.uxt.uxt-defaults.ix .button--ghost.is-disabled,.mdsp.mdsp-defaults.ix a.button--ghost.is-disabled,.mdsp.mdsp-defaults.ix .button--ghost.is-disabled{color:rgba(var(--color-button-primary-background-disabled))}.uxt.uxt-defaults.ix a.button--ghost.is-dangerButton:hover,.uxt.uxt-defaults.ix .button--ghost.is-dangerButton:hover,.mdsp.mdsp-defaults.ix a.button--ghost.is-dangerButton:hover,.mdsp.mdsp-defaults.ix .button--ghost.is-dangerButton:hover{border-color:rgba(var(--color-dangerPrimary), 1);color:rgba(var(--color-font-contrast), 1)}.uxt.uxt-defaults.ix a.button--primaryContentAction:not(.is-disabled):hover,.uxt.uxt-defaults.ix .button--primaryContentAction:not(.is-disabled):hover,.mdsp.mdsp-defaults.ix a.button--primaryContentAction:not(.is-disabled):hover,.mdsp.mdsp-defaults.ix .button--primaryContentAction:not(.is-disabled):hover{color:rgba(var(--color-primary-dark), 1)}.uxt.uxt-defaults.ix a.button--primaryContentAction:not(.is-disabled):active,.uxt.uxt-defaults.ix .button--primaryContentAction:not(.is-disabled):active,.mdsp.mdsp-defaults.ix a.button--primaryContentAction:not(.is-disabled):active,.mdsp.mdsp-defaults.ix .button--primaryContentAction:not(.is-disabled):active{color:rgba(var(--color-button-primary-background-active), 1)}.uxt.uxt-defaults.ix .card,.mdsp.mdsp-defaults.ix .card{background-color:rgba(0,0,0,0);border-color:rgba(var(--color-card-border))}.uxt.uxt-defaults.ix .card:hover,.mdsp.mdsp-defaults.ix .card:hover{background-color:rgba(var(--color-card-background-hover))}.uxt.uxt-defaults.ix .card:hover::after,.mdsp.mdsp-defaults.ix .card:hover::after{display:none}.uxt.uxt-defaults.ix .card:active,.mdsp.mdsp-defaults.ix .card:active{background-color:rgba(var(--color-card-background-active))}.uxt.uxt-defaults.ix .card .card__title>a,.mdsp.mdsp-defaults.ix .card .card__title>a{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .card .card__header .card__title a:focus:before,.mdsp.mdsp-defaults.ix .card .card__header .card__title a:focus:before{outline:unset}.uxt.uxt-defaults.ix .card::after,.mdsp.mdsp-defaults.ix .card::after{display:none}.uxt.uxt-defaults.ix .card--filled,.mdsp.mdsp-defaults.ix .card--filled{background-color:rgba(var(--color-card-list-background));border:unset;border-radius:4px}.uxt.uxt-defaults.ix .card--filled:hover,.mdsp.mdsp-defaults.ix .card--filled:hover{background-color:rgba(var(--color-card-list-background-hover))}.uxt.uxt-defaults.ix .card--filled:active,.mdsp.mdsp-defaults.ix .card--filled:active{background-color:rgba(var(--color-card-list-background-active))}.uxt.uxt-defaults.ix .card--filled::after,.mdsp.mdsp-defaults.ix .card--filled::after{display:none}.uxt.uxt-defaults.ix .card--filled .card__header .card__title a:focus:before,.mdsp.mdsp-defaults.ix .card--filled .card__header .card__title a:focus:before{outline:unset}.uxt.uxt-defaults.ix .dialog__title .dialog__close,.uxt.uxt-defaults.ix .dialog__title .dialog__close:visited,.mdsp.mdsp-defaults.ix .dialog__title .dialog__close,.mdsp.mdsp-defaults.ix .dialog__title .dialog__close:visited{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .container,.uxt.uxt-defaults.ix .fieldset,.uxt.uxt-defaults.ix fieldset,.uxt.uxt-defaults.ix .list .list__item,.mdsp.mdsp-defaults.ix .container,.mdsp.mdsp-defaults.ix .fieldset,.mdsp.mdsp-defaults.ix fieldset,.mdsp.mdsp-defaults.ix .list .list__item{border-color:rgba(var(--color-card-border))}.uxt.uxt-defaults.ix .emptyState::before,.uxt.uxt-defaults.ix .emptyState::after,.mdsp.mdsp-defaults.ix .emptyState::before,.mdsp.mdsp-defaults.ix .emptyState::after{background-image:none}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-page.p-highlight,.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-page.p-highlight{background-color:rgba(var(--color-pagination-highlight));color:rgb(var(--color-primary-darker))}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-page.p-highlight:hover,.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-page.p-highlight:hover{background-color:rgba(var(--color-pagination-highlight-hover))}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-element,.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-element{border-radius:unset}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-element:hover:not(.p-disabled),.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-element:hover:not(.p-disabled){background-color:rgba(var(--color-primary-lightest))}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-element:active:not(.p-disabled),.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-element:active:not(.p-disabled){background-color:rgba(var(--color-pagination-active))}.uxt.uxt-defaults.ix .data-table_paginator .p-paginator-element.p-highlight:active,.mdsp.mdsp-defaults.ix .data-table_paginator .p-paginator-element.p-highlight:active{background-color:rgba(var(--color-pagination-highlight-active))}.uxt.uxt-defaults.ix .inputGroup__label,.uxt.uxt-defaults.ix .inputGroup__label.is-required:after,.mdsp.mdsp-defaults.ix .inputGroup__label,.mdsp.mdsp-defaults.ix .inputGroup__label.is-required:after{color:rgba(var(--color-font-secondary), 1);font-weight:normal}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox).inputGroup__checkbox--indeterminate+label:after,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox).inputGroup__checkbox--indeterminate+label:after{left:5px;top:8px}.uxt.uxt-defaults.ix .inputGroup .inputGroup__radioButton.inputGroup__radioButton--indeterminate+label:after,.mdsp.mdsp-defaults.ix .inputGroup .inputGroup__radioButton.inputGroup__radioButton--indeterminate+label:after{left:7px;top:9px}.uxt.uxt-defaults.ix .inputGroup input[type=text],.uxt.uxt-defaults.ix .inputGroup__textarea,.uxt.uxt-defaults.ix .inputGroup__textInput,.mdsp.mdsp-defaults.ix .inputGroup input[type=text],.mdsp.mdsp-defaults.ix .inputGroup__textarea,.mdsp.mdsp-defaults.ix .inputGroup__textInput{background-color:rgba(var(--color-input-background), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=text]:hover,.uxt.uxt-defaults.ix .inputGroup__textarea:hover,.uxt.uxt-defaults.ix .inputGroup__textInput:hover,.mdsp.mdsp-defaults.ix .inputGroup input[type=text]:hover,.mdsp.mdsp-defaults.ix .inputGroup__textarea:hover,.mdsp.mdsp-defaults.ix .inputGroup__textInput:hover{background-color:rgba(var(--color-input-background-hover), 1);border-color:rgb(var(--color-input-border-hover), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=text]:focus,.uxt.uxt-defaults.ix .inputGroup__textarea:focus,.uxt.uxt-defaults.ix .inputGroup__textInput:focus,.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):focus+label:before,.uxt.uxt-defaults.ix .inputGroup input[type=radio]:focus+label::before,.uxt.uxt-defaults.ix .inputGroup select:focus,.mdsp.mdsp-defaults.ix .inputGroup input[type=text]:focus,.mdsp.mdsp-defaults.ix .inputGroup__textarea:focus,.mdsp.mdsp-defaults.ix .inputGroup__textInput:focus,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):focus+label:before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]:focus+label::before,.mdsp.mdsp-defaults.ix .inputGroup select:focus{outline:1px solid rgb(var(--color-focus-border), 1);outline-offset:1.75px;box-shadow:none}.uxt.uxt-defaults.ix .inputGroup .checkboxWrapper.checkboxWrapper--alternative .inputGroup__checkbox:checked+label:after,.mdsp.mdsp-defaults.ix .inputGroup .checkboxWrapper.checkboxWrapper--alternative .inputGroup__checkbox:checked+label:after{left:2px !important;top:5px !important}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox)+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox)+label::before{border-color:rgba(var(--color-base000), 1);border-radius:0;height:16px;width:16px}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):not(.is-disabled):hover+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):not(.is-disabled):hover+label::before{background-color:rgba(var(--color-secondary-hover), 1);border-color:rgba(var(--color-dynamic), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):not(.is-disabled):active+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):not(.is-disabled):active+label::before{background-color:rgba(var(--color-secondary-active));border-color:rgba(var(--color-dynamic))}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::before{background-color:rgba(var(--color-dynamic), 1);border-color:rgba(0,0,0,0)}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::after,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::after{content:"";transform:translate(-1px, -3px) rotate(-53deg) scale(2) skew(-8deg, -3deg);border-width:0 0 .0625rem .0625rem;left:-19px;top:8px;height:3px;width:5px}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label:hover::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label:hover::before{background-color:rgba(var(--color-primary-dark), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked:hover:not(.is-disabled)+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked:hover:not(.is-disabled)+label::before{background-color:rgba(var(--color-dynamic-hover), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked:active:not(.is-disabled)+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox):checked:active:not(.is-disabled)+label::before{background-color:rgba(var(--color-dynamic-active), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=radio]+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]+label::before{border-color:rgb(var(--color-font));box-sizing:border-box;height:20px;width:20px}.uxt.uxt-defaults.ix .inputGroup input[type=radio]:checked+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]:checked+label::before{box-shadow:none;border-color:rgb(var(--color-font));outline:6px solid rgba(var(--color-dynamic), 1);outline-offset:-6px}.uxt.uxt-defaults.ix .inputGroup input[type=radio]:not(.is-disabled):hover+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]:not(.is-disabled):hover+label::before{background-color:rgba(var(--color-secondary-hover), 1);border-color:rgba(var(--color-dynamic), 1)}.uxt.uxt-defaults.ix .inputGroup input[type=radio]:not(.is-disabled):active+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio]:not(.is-disabled):active+label::before{background-color:rgba(var(--color-secondary-active));border-color:rgba(var(--color-dynamic))}.uxt.uxt-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox).is-disabled+label::before,.uxt.uxt-defaults.ix .inputGroup input[type=radio].is-disabled+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=checkbox]:not(.switch__checkbox).is-disabled+label::before,.mdsp.mdsp-defaults.ix .inputGroup input[type=radio].is-disabled+label::before{border-color:var(--theme-color-component-4)}.uxt.uxt-defaults.ix .h1,.uxt.uxt-defaults.ix h1,.mdsp.mdsp-defaults.ix .h1,.mdsp.mdsp-defaults.ix h1{font-size:1.375rem}.uxt.uxt-defaults.ix .listNavigation .listNavigation__list .list__item .item__link:hover,.mdsp.mdsp-defaults.ix .listNavigation .listNavigation__list .list__item .item__link:hover{background-color:rgba(var(--color-primary-lighter), 0.4)}.uxt.uxt-defaults.ix .popover__container,.mdsp.mdsp-defaults.ix .popover__container{background-color:rgba(var(--color-ix-theme-2), 1)}.uxt.uxt-defaults.ix .menu .popover__container .popover__item:not(.is-disabled),.uxt.uxt-defaults.ix .menu .popover__container .popover__item:visited:not(.is-disabled),.mdsp.mdsp-defaults.ix .menu .popover__container .popover__item:not(.is-disabled),.mdsp.mdsp-defaults.ix .menu .popover__container .popover__item:visited:not(.is-disabled){color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .menu .popover__container .popover__item:not(.is-disabled):hover,.mdsp.mdsp-defaults.ix .menu .popover__container .popover__item:not(.is-disabled):hover{background-color:rgba(var(--color-ghost-hover))}.uxt.uxt-defaults.ix .menu .popover__container .popover__item:not(.is-disabled):active,.mdsp.mdsp-defaults.ix .menu .popover__container .popover__item:not(.is-disabled):active{background-color:rgba(var(--color-ghost-active))}.uxt.uxt-defaults.ix .messageWrapper .message,.mdsp.mdsp-defaults.ix .messageWrapper .message{border-width:2px;background-color:rgba(var(--color-interface), 1);color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .messageWrapper .message::after,.mdsp.mdsp-defaults.ix .messageWrapper .message::after{display:none}.uxt.uxt-defaults.ix .messageWrapper .message.is-informative,.uxt.uxt-defaults.ix .messageWrapper .message.is-info,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-informative,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-info{border-color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .messageWrapper .message.is-success,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-success{border-color:rgba(var(--color-success), 1)}.uxt.uxt-defaults.ix .messageWrapper .message.is-warning,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-warning{border-color:rgba(var(--color-warning), 1)}.uxt.uxt-defaults.ix .messageWrapper .message.is-alert,.uxt.uxt-defaults.ix .messageWrapper .message.is-error,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-alert,.mdsp.mdsp-defaults.ix .messageWrapper .message.is-error{border-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-informative,.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-info,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-informative,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-info{border-color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-informative::before,.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-info::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-informative::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-info::before{color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-success::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-success::before{color:rgba(var(--color-success), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-warning::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-warning::before{color:rgba(var(--color-warning), 1)}.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-alert::before,.uxt.uxt-defaults.ix .messageWrapper .message--withIcon.is-error::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-alert::before,.mdsp.mdsp-defaults.ix .messageWrapper .message--withIcon.is-error::before{color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .notifications .notification,.mdsp.mdsp-defaults.ix .notifications .notification{box-shadow:var(--theme-shadow-4);color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .notifications .notification .notification__close,.mdsp.mdsp-defaults.ix .notifications .notification .notification__close{right:-36px;top:12px;line-height:24px}.uxt.uxt-defaults.ix .notifications .notification .notification__close::before,.mdsp.mdsp-defaults.ix .notifications .notification .notification__close::before{color:rgba(var(--color-font), 1);font-weight:bold}.uxt.uxt-defaults.ix .notifications .notification .notification__close:hover,.mdsp.mdsp-defaults.ix .notifications .notification .notification__close:hover{background-color:var(--color-button-invisible-secondary--background-hover)}.uxt.uxt-defaults.ix .notifications .notification .notification__close:active,.mdsp.mdsp-defaults.ix .notifications .notification .notification__close:active{background-color:var(--color-button-invisible-secondary--background-active)}.uxt.uxt-defaults.ix .notifications .notification__main,.mdsp.mdsp-defaults.ix .notifications .notification__main{margin:0 52px 0 52px;padding:12px 0}.uxt.uxt-defaults.ix .notifications .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification__main::before{color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .notifications .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification__details{border-top-color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-info .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-info .notification__main::before{color:rgba(var(--color-info), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-success .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-success .notification__main::before{color:rgba(var(--color-success), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-success .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification.is-success .notification__details{border-top-color:rgba(var(--color-success), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-warning .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning .notification__main::before{color:rgba(var(--color-warning), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-warning .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning .notification__details{border-top-color:rgba(var(--color-warning), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-error .notification__main::before,.uxt.uxt-defaults.ix .notifications .notification.is-alert .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-error .notification__main::before,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert .notification__main::before{color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .notifications .notification.is-error .notification__details,.uxt.uxt-defaults.ix .notifications .notification.is-alert .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification.is-error .notification__details,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert .notification__details{border-top-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .notifications .notification,.uxt.uxt-defaults.ix .notifications .notification.is-info,.uxt.uxt-defaults.ix .notifications .notification.is-warning,.uxt.uxt-defaults.ix .notifications .notification.is-error,.uxt.uxt-defaults.ix .notifications .notification.is-alert,.uxt.uxt-defaults.ix .notifications .notification.is-success,.mdsp.mdsp-defaults.ix .notifications .notification,.mdsp.mdsp-defaults.ix .notifications .notification.is-info,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning,.mdsp.mdsp-defaults.ix .notifications .notification.is-error,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert,.mdsp.mdsp-defaults.ix .notifications .notification.is-success{background-color:rgba(var(--color-interface-secondary), 1);color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .notifications .notification__title,.uxt.uxt-defaults.ix .notifications .notification__content,.uxt.uxt-defaults.ix .notifications .notification.is-info__title,.uxt.uxt-defaults.ix .notifications .notification.is-info__content,.uxt.uxt-defaults.ix .notifications .notification.is-warning__title,.uxt.uxt-defaults.ix .notifications .notification.is-warning__content,.uxt.uxt-defaults.ix .notifications .notification.is-error__title,.uxt.uxt-defaults.ix .notifications .notification.is-error__content,.uxt.uxt-defaults.ix .notifications .notification.is-alert__title,.uxt.uxt-defaults.ix .notifications .notification.is-alert__content,.uxt.uxt-defaults.ix .notifications .notification.is-success__title,.uxt.uxt-defaults.ix .notifications .notification.is-success__content,.mdsp.mdsp-defaults.ix .notifications .notification__title,.mdsp.mdsp-defaults.ix .notifications .notification__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-info__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-info__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-error__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-error__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert__content,.mdsp.mdsp-defaults.ix .notifications .notification.is-success__title,.mdsp.mdsp-defaults.ix .notifications .notification.is-success__content{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .notifications .notification .details__expander,.uxt.uxt-defaults.ix .notifications .notification .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-info .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-info .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-warning .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-warning .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-error .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-error .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-alert .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-alert .details__expander:visited,.uxt.uxt-defaults.ix .notifications .notification.is-success .details__expander,.uxt.uxt-defaults.ix .notifications .notification.is-success .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-info .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-info .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-warning .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-error .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-error .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-alert .details__expander:visited,.mdsp.mdsp-defaults.ix .notifications .notification.is-success .details__expander,.mdsp.mdsp-defaults.ix .notifications .notification.is-success .details__expander:visited{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error::before{display:none}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid .inputGroup__label,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid .inputGroup__label{color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid>textarea,.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid>input,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid>textarea,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup.is-invalid>input{background-color:rgba(var(--color-component-error), 1);border-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup--error,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup--error{display:flex;flex-direction:row;gap:4px}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup--error:before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup--error:before{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;content:"";background-size:16px;height:16px;width:16px}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup--error:after,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup--error:after{display:none}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup input[type=checkbox]:not(.switch__checkbox)+label::before,.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup input[type=radio]+label::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup input[type=checkbox]:not(.switch__checkbox)+label::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup input[type=radio]+label::before{border-color:rgba(var(--color-error), 1);background-color:rgba(var(--color-component-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup input[type=checkbox]:not(.switch__checkbox):checked+label::before{background-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup input[type=radio]:checked+label::before,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup input[type=radio]:checked+label::before{outline-color:rgba(var(--color-error), 1)}.uxt.uxt-defaults.ix .form__formGroup.has-error .inputGroup select,.mdsp.mdsp-defaults.ix .form__formGroup.has-error .inputGroup select{background-color:rgba(var(--color-component-error), 1)}.uxt.uxt-defaults.ix.forceDefaultElements input[type=submit],.uxt.uxt-defaults.ix.forceDefaultElements button,.mdsp.mdsp-defaults.ix.forceDefaultElements input[type=submit],.mdsp.mdsp-defaults.ix.forceDefaultElements button{border-radius:0}.uxt.uxt-defaults.ix input[type=submit],.mdsp.mdsp-defaults.ix input[type=submit]{border-radius:0}.uxt.uxt-defaults.ix .keyValueWrapper__keyValue .keyValue__key,.mdsp.mdsp-defaults.ix .keyValueWrapper__keyValue .keyValue__key{color:rgba(var(--color-soft-text))}.uxt.uxt-defaults.ix .keyValueWrapper__keyValue .keyValue__value,.mdsp.mdsp-defaults.ix .keyValueWrapper__keyValue .keyValue__value{color:rgba(var(--color-font), 1)}.uxt.uxt-defaults.ix .stepper__steps .step__status__dot,.mdsp.mdsp-defaults.ix .stepper__steps .step__status__dot{min-height:20px;min-width:20px}.uxt.uxt-defaults.ix .stepper__steps .step__status__dot::before,.mdsp.mdsp-defaults.ix .stepper__steps .step__status__dot::before{font-size:16px}.uxt.uxt-defaults.ix .stepper__steps .step__flyout__container .step__status__line__wrapper,.mdsp.mdsp-defaults.ix .stepper__steps .step__flyout__container .step__status__line__wrapper{padding-left:10px}.uxt.uxt-defaults.ix .stepper__steps .step.is-current .step__status,.mdsp.mdsp-defaults.ix .stepper__steps .step.is-current .step__status{background-color:rgba(var(--color-ghost-selected))}.uxt.uxt-defaults.ix .stepper__steps .step__status__label,.mdsp.mdsp-defaults.ix .stepper__steps .step__status__label{font-size:14px;font-weight:normal}.uxt.uxt-defaults.ix .stepper__steps .step:last-child .step__status__indicator .step__status__line__wrapper:last-child,.mdsp.mdsp-defaults.ix .stepper__steps .step:last-child .step__status__indicator .step__status__line__wrapper:last-child{visibility:hidden}.uxt.uxt-defaults.ix .stepper--simple .stepper__steps .step__flyout__container .step__status__line__wrapper,.mdsp.mdsp-defaults.ix .stepper--simple .stepper__steps .step__flyout__container .step__status__line__wrapper{padding-left:18px}.uxt.uxt-defaults.ix .stepper--simple .stepper__steps .step__status__dot,.mdsp.mdsp-defaults.ix .stepper--simple .stepper__steps .step__status__dot{min-height:16px;min-width:16px}:root .uxt-ix-theme-light{--color-base000: 0, 0, 40;--color-base200: 51, 51, 83;--color-base450: 102, 102, 126;--color-base600: 153, 153, 169;--color-base750: 204, 204, 212;--color-base800: 229, 229, 233;--color-base900: 240, 240, 240;--color-base950: 243, 243, 240;--color-base1000: 255, 255, 255;--color-primary-darker: 0, 81, 89;--color-primary-dark: 25, 98, 108;--color-primary: 0, 121, 147;--color-primary-light: 0, 152, 166;--color-primary-lighter: 209, 255, 242;--color-primary-lightest: 235, 247, 248;--color-success-dark: 1, 106, 44;--color-success: 1, 137, 58;--color-success-light: 180, 204, 191;--color-success-lighter: 210, 234, 221;--color-warning-dark: 95, 79, 17;--color-warning: 233, 195, 42;--color-warning-light: 230, 219, 174;--color-warning-lighter: 255, 245, 204;--color-error-dark: 167, 27, 44;--color-error: 215, 35, 57;--color-error-light: 227, 184, 194;--color-error-lighter: 253, 221, 229;--color-info-dark: 0, 98, 138;--color-info: 0, 126, 177;--color-info-light: 183, 205, 214;--color-info-lighter: 204, 229, 239;--color-dangerPrimary: var(--color-error);--color-dangerPrimary-hover: 193, 31, 51;--color-dangerPrimary-active: 180, 29, 48;--color-dangerSecondary: var(--color-error);--color-dangerSecondary-hover: var(--color-dangerPrimary-hover);--color-dangerSecondary-active: var(--color-dangerPrimary-active);--color-font: var(--color-base000);--color-font-secondary: var(--color-base600);--color-font-disabled: var(--color-base600);--color-font-contrast: var(--color-base1000);--color-interface: var(--color-base1000);--color-interface-secondary: var(--color-base950);--color-interface-highlight: var(--color-base1000);--color-interface-headerfooter: var(--color-base1000);--color-shadow: var(--color-base000);--color-overlay: var(--color-base200);--color-border: 232, 232, 232;--color-disabled: var(--color-base600);--color-disabled-contrast: var(--color-base1000);--color-appBar-color: var(--color-base200);--color-appBar--active-collapsible: var(--color-primary);--color-appBar-bg: var(--color-interface-secondary);--color-appBar--active-bg: var(--color-interface);--color-appBar-hover: var(--color-primary);--color-appBar-border: 232, 232, 232;--color-appBar--active-indicator: var(--color-primary);--color-appBar--badge: var(--color-error);--color-appBar--active-color: var(--color-primary);--color-appHeader-bg: var(--color-interface-secondary);--color-appHeader-font: var(--color-primary);--color-charting01: 0, 153, 153;--color-charting02: 0, 137, 14;--color-charting03: 0, 41, 73;--color-charting04: 26, 116, 125;--color-charting05: 0, 81, 89;--color-charting06: 54, 100, 198;--color-charting07: 0, 35, 122;--color-charting08: 115, 83, 229;--color-charting09: 85, 59, 163;--color-charting10: 116, 0, 137;--color-charting11: 192, 71, 116;--color-charting12: 79, 21, 61;--color-charting13: 190, 89, 37;--color-charting14: 128, 16, 0;--color-charting15: 128, 87, 0;--color-charting16: 117, 117, 99;--color-charting17: 76, 76, 104;--color-charting18: 0, 135, 190;--color-charting19: var(--color-error);--color-charting20: var(--color-warning);--color-charting21: var(--color-success);--color-component: 189, 189, 174;--color-component-1: var(--color-component), .2;--color-component-1-hover: var(--color-component), .35;--color-component-1-active: 150, 150, 138 .35;--color-component-4: var(--color-base000), .45;--color-component-error: 252, 204, 215;--color-soft-text: var(--color-base000), .6;--color-dynamic: var(--color-primary-darker);--color-dynamic-hover: 18, 93, 101;--color-dynamic--active: 16, 82, 89;--color-primary-active: 22, 86, 92;--color-secondary-hover: var(--color-primary-lighter);--color-secondary-active: 184, 242, 226;--color-focus-border: 25, 159, 255;--color-ix-theme-2: 243, 243, 240;--color-ix-error: var(--color-error);--color-ix-error-hover: 193, 31, 51;--color-ix-error-active: 180, 29, 48;--color-ix-error-contrast: var(--color-base1000);--color-ix-warning: var(--color-warning);--color-ix-warning-hover: 227, 186, 23;--color-ix-warning-active: 208, 171, 21;--color-ix-warning-contrast: var(--color-base000);--color-ix-success: var(--color-success);--color-ix-success-hover: 1, 122, 51;--color-ix-success-active: 1, 111, 47;--color-ix-success-contrast: var(--color-base1000);--color-ix-info: var(--color-info);--color-ix-info-hover: 0, 113, 158;--color-ix-info-active: 0, 105, 148;--color-ix-info-contrast: var(--color-base1000);--color-shadow-1: rgba(0, 0, 40, 0.1);--color-shadow-2: rgba(0, 0, 40, 0.2);--color-shadow-3: rgba(0, 0, 40, 0.12);--theme-shadow-4: 0px 0px 2px var(--color-shadow-1), 0px 4px 8px var(--color-shadow-1), 0px 12px 18px var(--color-shadow-1);--color-card-list-background: var(--color-component-1);--color-card-list-background-hover: var(--color-component-1-hover);--color-card-list-background-active: var(--color-component-1-active);--color-card-background: transparent;--color-card-background-hover: var(--color-ghost-hover);--color-card-background-active: var(--color-ghost-active);--color-card-border: var(--color-base000), .20;--color-input-background: var(--color-primary-lightest);--color-input-background-hover: var(--color-primary-lighter);--color-input-border-hover: var(--color-primary-darker);--color-input-error-background: var(--color-component-error);--color-button-primary-background-active: var(--color-primary-active);--color-button-primary-background-disabled: var(--color-component-4);--color-button-secondary-background: var(--color-base1000);--color-button-secondary-background-hover: var(--color-secondary-hover);--color-button-secondary-background-active: var(--color-secondary-active);--color-button-secondary-border-hover: var(--color-primary-darker);--color-button-secondary-color-hover: var(--color-primary-darker);--color-button-secondary-border-active: var(--color-primary-darker);--color-button-secondary-color-active: var(--color-primary-darker);--color-ghost: 0, 0, 0, 0;--color-ghost-hover: var(--color-component), .15;--color-ghost-active: 143, 143, 117, 0.15;--color-ghost-selected: 0, 255, 185, 0.18;--color-ghost-selected-hover: 32, 197, 126, .22;--color-button-ghost-font-disabled: var(--color-component-4);--color-button-invisible-secondary-background-hover: rgb(189 189 174 / 15%);--color-button-invisible-secondary-background-active: rgb(143 143 117 / 15%);--color-pagination-active: var(--color-ghost-active);--color-pagination-highlight: var(--color-ghost-selected);--color-pagination-highlight-hover: var(--color-ghost-selected-hover);--color-pagination-highlight-active: var(--color-primary-lighter)}:root .uxt-ix-theme-dark{color-scheme:dark;--color-base000: 255, 255, 255;--color-base200: 242, 242, 244;--color-base450: 229, 229, 233;--color-base600: 204, 204, 212;--color-base750: 153, 153, 169;--color-base800: 102, 102, 126;--color-base900: 51, 51, 83;--color-base950: 35, 35, 60;--color-base1000: 0, 0, 40;--color-primary-darker: 197, 255, 239;--color-primary-dark: 0, 229, 170;--color-primary: 0, 204, 204;--color-primary-light: 0, 255, 185;--color-primary-lighter: 0, 24, 43;--color-primary-lightest: 0, 41, 73;--color-success-dark: 0, 87, 36;--color-success: 1, 214, 90;--color-success-light: 49, 163, 97;--color-success-lighter: 64, 214, 127;--color-warning-dark: 77, 65, 15;--color-warning: 255, 215, 50;--color-warning-light: 179, 161, 90;--color-warning-lighter: 255, 230, 128;--color-error-dark: 128, 19, 32;--color-error: 255, 38, 64;--color-error-light: 204, 94, 108;--color-error-lighter: 255, 143, 157;--color-info-dark: 0, 80, 92;--color-info: 0, 190, 220;--color-info-light: 43, 129, 143;--color-info-lighter: 66, 199, 220;--color-dangerPrimary: var(--color-error);--color-dangerPrimary-hover: 255, 66, 89;--color-dangerPrimary-active: 255, 20, 49;--color-dangerSecondary: var(--color-error);--color-dangerSecondary-hover: var(--color-dangerPrimary-hover);--color-dangerSecondary-active: var(--color-dangerPrimary-active);--color-font: var(--color-base000);--color-font-secondary: var(--color-base600);--color-font-disabled: 115, 115, 137;--color-font-contrast: var(--color-base1000);--color-interface: var(--color-base1000);--color-interface-secondary: var(--color-base950);--color-interface-highlight: var(--color-base950);--color-interface-headerfooter: var(--color-base950);--color-disabled: var(--color-font-disabled);--color-disabled-contrast: var(--color-base1000);--color-shadow: var(--color-base900);--color-overlay: var(--color-base1000);--color-border: var(--color-base900);--color-appBar-color: var(--color-font);--color-appBar--active-collapsible: var(--color-primary);--color-appBar-bg: var(--color-interface-secondary);--color-appBar--active-bg: var(--color-interface);--color-appBar-hover: var(--color-primary);--color-appBar-border: 51, 51, 83;--color-appBar--active-indicator: var(--color-primary);--color-appBar--badge: var(--color-error);--color-appBar--active-color: var(--color-primary);--color-appHeader-bg: var(--color-interface-secondary);--color-appHeader-font: var(--color-primary);--color-charting01: 0, 193, 182;--color-charting02: 1, 214, 90;--color-charting03: 204, 245, 245;--color-charting04: 0, 255, 185;--color-charting05: 133, 233, 210;--color-charting06: 104, 149, 246;--color-charting07: 151, 199, 255;--color-charting08: 128, 92, 255;--color-charting09: 191, 176, 243;--color-charting10: 185, 92, 201;--color-charting11: 229, 101, 155;--color-charting12: 255, 152, 196;--color-charting13: 190, 89, 37;--color-charting14: 255, 144, 0;--color-charting15: 255, 215, 50;--color-charting16: 170, 170, 150;--color-charting17: 125, 128, 153;--color-charting18: 77, 209, 231;--color-charting19: var(--color-error);--color-charting20: var(--color-warning);--color-charting21: var(--color-success);--color-component: 157, 157, 150;--color-component-1: var(--color-component), .2;--color-component-1-hover: var(--color-component), .35;--color-component-1-active: 125, 125, 120 .35;--color-component-4: var(--color-base000), .45;--color-component-error: 51, 17, 49;--color-soft-text: var(--color-base000), .6;--color-dynamic: var(--color-primary-light);--color-dynamic-hover: 98, 238, 199;--color-dynamic-active: 92, 224, 188;--color-secondary-hover: 0, 31, 57;--color-secondary-active: 0, 24, 43;--color-focus-border: 25, 159, 255;--color-ix-theme-2: 35, 35, 60;--color-ix-error: var(--color-error);--color-ix-error-hover: 255, 66, 89;--color-ix-error-active: 255, 20, 49;--color-ix-error-contrast: var(--color-base1000);--color-ix-warning: var(--color-warning);--color-ix-warning-hover: 255, 221, 82;--color-ix-warning-active: 255, 212, 36;--color-ix-warning-contrast: var(--color-base1000);--color-ix-success: var(--color-success);--color-ix-success-hover: 1, 234, 98;--color-ix-success-active: 1, 193, 81;--color-ix-success-contrast: var(--color-base1000);--color-ix-info: var(--color-info);--color-ix-info-hover: 0, 207, 240;--color-ix-info-active: 0, 181, 209;--color-ix-info-contrast: var(--color-base1000);--color-shadow-1: rgba(0, 0, 0, 0.6);--color-shadow-2: rgba(0, 0, 0, 0.2);--color-shadow-3: rgba(0, 0, 0, 0.6);--theme-shadow-4: 0px 0px 2px var(--color-shadow-2), 0px 4px 8px var(--color-shadow-1), 0px 12px 18px var(--color-shadow-1);--color-card-list-background: var(--color-component-1);--color-card-list-background-hover: var(--color-component-1-hover);--color-card-list-background-active: var(--color-component-1-active);--color-card-background: transparent;--color-card-background-hover: var(--color-ghost-hover);--color-card-background-active: var(--color-ghost-active);--color-card-border: 235, 240, 245, .40;--color-input-background: 0, 24, 59;--color-input-background-hover: var(--color-secondary-hover);--color-input-border-hover: var(--color-dynamic-hover);--color-button-primary-background-active: 0, 242, 176;--color-button-primary-background-disabled: var(--color-component-4);--color-button-secondary-background: var(--color-base1000);--color-button-secondary-background-hover: var(--color-secondary-hover);--color-button-secondary-background-active: var(--color-secondary-active);--color-button-secondary-border-hover: var(--color-primary-light);--color-button-secondary-color-hover: var(--color-primary-light);--color-button-secondary-border-active: 0, 255, 185;--color-button-secondary-color-active: 0, 255, 185;--color-ghost: 255, 255, 255, 0;--color-ghost-hover: var(--color-component), .15;--color-ghost-active: 105, 105, 99, .15;--color-ghost-selected: 58, 255, 201, .16;--color-ghost-selected-hover: 123, 253, 199, .25;--color-ghost-selected-active: 115, 221, 175, .22;--color-button-ghost-font-disabled: var(--color-component-4);--color-button-invisible-secondary-background-hover: rgb(189 189 174 / 15%);--color-button-invisible-secondary-background-active: rgb(143 143 117 / 15%);--color-pagination-active: var(--color-ghost-active);--color-pagination-highlight: 0, 255, 185, .12;--color-pagination-highlight-active: var(--color-ghost-selected-active)} \ No newline at end of file diff --git a/packages/documentation/docs/migration/uxt.md b/packages/documentation/docs/migration/uxt.md new file mode 100644 index 00000000000..122cc318706 --- /dev/null +++ b/packages/documentation/docs/migration/uxt.md @@ -0,0 +1,108 @@ +--- +sidebar_position: 2 +sidebar_label: Migration from UXT 2.7.0 +--- + +import Accordion from '@site/src/components/Accordion'; + +# UXT 2.7.0 to Siemens Industrial Experience design system + +For a quick and easy migration without changing your code base, the iX-UXT CSS Theme is prepared for app developers using the CSS from UXT (User Experience Toolkit, formerly named MindSphere Design System). + +:::info + +For the full experience, please use the Siemens Industrial Experience components. The theme is intended for a quick, yet, incomplete switch from UXT as a legacy design system. + +::: + +## Usage +1. When using UXT below v2.7.0, download the CSS theme and import it into your project. + _If you are using UXT v2.7.0 or higher, it is already part of the UXT CSS._ +2. Apply the class `.ix` to the `.uxt-defaults` element. +3. Depending if you want to use the dark or light theme, add `.uxt-ix-theme-dark` or `.uxt-ix-theme-light` to your `body` element. + +In the end, your setup should look like this: + +``` + + ... +
+ ... + +``` + +``` + + ... +
+ ... + +``` + +**Note**: We recommend using the CSS theme with UXT v2.7.0 + +Your layout might change in some places when applying the theme, including: +1. Headings are notably smaller +2. Buttons are slightly wider because of the bold label + +## Troubleshooting + + +1. Check if you use color variables (no raw HEX or RGB values) +2. Check if you applied the `.uxt-ix-theme-dark` on the `body` +3. Update your UXT version to v2.7.0 + + + +1. Check if you override specific attributes with `!important` +2. Check if you added the `.ix` class to the element with the `.uxt-defaults` class, as shown above +3. Update your current UXT version to 2.7.0 + + + +1. Check if you use color variables (no raw HEX or RGB values) +2. Check if you used meta color variables correctly (see more details [here](https://design.mindsphere.io/patterns/color.html#tab2anchor4)): + 1. For text elements: use the font colors, e.g. color-font or color-font-secondary (no base colors) + 2. For backgrounds: use the interface colors, e.g. color-interface or color-interface-secondary (no base colors) + 3. For statuses: use the error, warning, info, success colors (not primary) + + +If you're facing any other problems, please raise an issue in GitHub [raising an issue](https://github.com/siemens/ix/issues). + +## Component name differences +As some of the components are named differently in Industrial Experience, please consult this list of the most important component name differences to help make your migration easier: + +| **User Experience Toolkit** | **Industrial Experience** | +| --------------------------------------------- | ------------------------------------------------------------------ | +| App bar | Nav menu | +| Badge | Pill, chip | +| Busy indicator | Spinner | +| Button
- primary
- secondary
- ghost | Button
- primary filled
- primary outline
- primary ghost | +| Card grid | Layout grid | +| Container | Card | +| Dialog | Modal | +| Dropzone | Upload | +| List | Event list | +| Stepper | Workflow | +| Menu | Dropdown button | +| Message | Message bar | +| Notification | Toast | +| Pager | Pagination | +| Popover | Tooltip, dropdown | +| Switch | Toggle | +| Context region | Pane (inline right) | +| Item region | Pane (floating right) | +| Leading region | Pane (inline left) | + +## System icons + +Key differences between UXT and Industrial Experience: + +- [UXT offers an iconfont](https://design.mindsphere.io/patterns/system-icons.html) with 3 different styles (regular, bold, filled) +- [iX offers SVGs](https://ix.siemens.io/docs/icon-library/icons) with mainly 1 style that corresponds to our bold and partially filled variants separately + +When changing to the SVG icons by Industrial Experience, check whether your stylings still apply in your custom-built components. + +## Figma library + +When switching from UXT to Industrial Experience, use the swap library feature as described [here](https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-libraries). From aa641d50c2e5d27e30fc2799b98bb1977c316696 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 24 Sep 2024 11:35:52 +0200 Subject: [PATCH 03/28] refactor(docs): remove example-styles project (#1472) Co-authored-by: matthias --- ix.code-workspace | 4 - packages/angular-test-app/package.json | 2 +- .../angular-test-app/scripts/copy-preview.mjs | 31 +- .../src/preview-examples/about-and-legal.css | 17 + .../src/preview-examples/about-and-legal.ts | 2 +- .../application-app-switch.css | 17 + .../application-app-switch.ts | 2 +- .../application-breakpoints.css | 17 + .../application-breakpoints.ts | 2 +- .../src/preview-examples}/application.css | 4 + .../src/preview-examples/application.ts | 2 +- .../preview-examples}/basic-navigation.css | 4 + .../src/preview-examples/basic-navigation.ts | 2 +- .../preview-examples/blind-header-actions.css | 16 + .../preview-examples/blind-header-actions.ts | 2 +- .../src/preview-examples/blind-variants.css | 16 + .../src/preview-examples/blind-variants.ts | 2 +- .../src/preview-examples}/blind.css | 4 + .../src/preview-examples/blind.ts | 2 +- .../preview-examples/button-danger-ghost.css | 20 + .../button-danger-outline.css | 20 + .../preview-examples/button-danger-outline.ts | 2 +- .../src/preview-examples/button-danger.css | 20 + .../src/preview-examples/button-danger.ts | 2 +- .../src/preview-examples/button-ghost.css | 20 + .../src/preview-examples/button-ghost.ts | 2 +- .../preview-examples/button-grey-ghost.css | 20 + .../src/preview-examples/button-grey-ghost.ts | 2 +- .../button-grey-secondary.css | 20 + .../preview-examples/button-grey-secondary.ts | 2 +- .../src/preview-examples/button-grey.css | 20 + .../src/preview-examples/button-grey.ts | 2 +- .../src/preview-examples}/button-loading.css | 4 + .../src/preview-examples/button-loading.ts | 2 +- .../src/preview-examples/button-secondary.css | 20 + .../src/preview-examples/button-secondary.ts | 2 +- .../src/preview-examples/button-text-icon.css | 20 + .../src/preview-examples/button-text-icon.ts | 2 +- .../preview-examples/button-with-icon.css} | 4 + .../src/preview-examples/button-with-icon.ts | 2 +- .../src/preview-examples}/buttons.css | 4 + .../src/preview-examples/buttons.ts | 2 +- .../src/preview-examples}/card.css | 4 + .../src/preview-examples/card.ts | 2 +- .../src/preview-examples}/chip.css | 4 + .../src/preview-examples/chip.ts | 2 +- .../preview-examples/dropdown-button-icon.css | 24 ++ .../preview-examples/dropdown-button-icon.ts | 2 +- .../src/preview-examples}/dropdown-button.css | 4 + .../src/preview-examples/dropdown-button.ts | 2 +- .../echarts-bar-horizontal-stacked.css | 19 + .../echarts-bar-horizontal-stacked.ts | 2 +- .../preview-examples/echarts-bar-simple.css | 19 + .../preview-examples/echarts-bar-simple.ts | 2 +- .../src/preview-examples/echarts-circle.css | 19 + .../src/preview-examples/echarts-circle.ts | 2 +- .../preview-examples/echarts-empty-state.css | 19 + .../preview-examples/echarts-empty-state.ts | 2 +- .../src/preview-examples/echarts-gauge.css | 19 + .../src/preview-examples/echarts-gauge.ts | 2 +- .../echarts-line-advanced.css | 19 + .../preview-examples/echarts-line-advanced.ts | 2 +- .../echarts-line-multiple-y-axis.css | 19 + .../echarts-line-multiple-y-axis.ts | 2 +- .../preview-examples/echarts-line-simple.css | 19 + .../preview-examples/echarts-line-simple.ts | 2 +- .../src/preview-examples/echarts-pie.css | 19 + .../src/preview-examples/echarts-pie.ts | 2 +- .../preview-examples/echarts-progress-arc.css | 19 + .../preview-examples/echarts-progress-arc.ts | 2 +- .../echarts-progress-circle.css | 19 + .../echarts-progress-circle.ts | 2 +- .../preview-examples/echarts-special-3d.css | 19 + .../preview-examples/echarts-special-3d.ts | 2 +- .../echarts-special-toolbox.css | 19 + .../echarts-special-toolbox.ts | 2 +- .../preview-examples/echarts-special-zoom.css | 19 + .../preview-examples/echarts-special-zoom.ts | 2 +- .../src/preview-examples/echarts.css | 19 + .../src/preview-examples/echarts.ts | 2 +- .../src/preview-examples}/flip-tile.css | 6 +- .../src/preview-examples/flip-tile.ts | 2 +- .../src/preview-examples}/global.css | 4 + .../src/preview-examples/grid-padding.css | 35 ++ .../src/preview-examples/grid-padding.ts | 2 +- .../src/preview-examples/grid-size.css | 35 ++ .../src/preview-examples/grid-size.ts | 2 +- .../src/preview-examples}/grid.css | 6 +- .../src/preview-examples/grid.ts | 2 +- .../icon-toggle-button-primary-ghost.css} | 4 + .../icon-toggle-button-primary-ghost.ts | 2 +- .../icon-toggle-button-primary-outline.css | 20 + .../icon-toggle-button-primary-outline.ts | 2 +- .../icon-toggle-button-secondary-ghost.css | 20 + .../icon-toggle-button-secondary-ghost.ts | 2 +- .../icon-toggle-button-secondary-outline.css | 20 + .../icon-toggle-button-secondary-outline.ts | 2 +- .../icon-toggle-button-secondary.css | 20 + .../icon-toggle-button-secondary.ts | 2 +- .../src/preview-examples}/kpi.css | 6 +- .../src/preview-examples/kpi.ts | 2 +- .../src/preview-examples}/menu-category.css | 6 +- .../src/preview-examples/menu-category.ts | 2 +- .../menu-with-bottom-tabs.css | 17 + .../preview-examples/menu-with-bottom-tabs.ts | 2 +- .../src/preview-examples}/message-bar.css | 10 +- .../src/preview-examples/message-bar.ts | 2 +- .../src/preview-examples}/modal-sizes.css | 4 + .../src/preview-examples/modal-sizes.ts | 2 +- .../src/preview-examples}/pill-variants.css | 4 + .../src/preview-examples/pill-variants.ts | 2 +- .../src/preview-examples}/pill.css | 4 + .../src/preview-examples/pill.ts | 2 +- .../src/preview-examples/popover-news.css | 17 + .../src/preview-examples/popover-news.ts | 2 +- .../src/preview-examples}/radio-button.css | 4 + .../src/preview-examples/radio-button.ts | 2 +- .../src/preview-examples/settings.css | 17 + .../src/preview-examples/settings.ts | 2 +- .../src/preview-examples}/tabs.css | 6 +- .../src/preview-examples/tabs.ts | 2 +- .../src/preview-examples}/theme-switcher.css | 6 +- .../src/preview-examples/theme-switcher.ts | 2 +- .../src/preview-examples/tile.css | 16 + .../src/preview-examples/tile.ts | 2 +- .../toggle-button-primary-ghost.css} | 4 + .../toggle-button-primary-ghost.ts | 2 +- .../toggle-button-primary-outline.css | 20 + .../toggle-button-primary-outline.ts | 2 +- .../toggle-button-primary.css | 20 + .../preview-examples/toggle-button-primary.ts | 2 +- .../toggle-button-secondary-ghost.css | 20 + .../toggle-button-secondary-ghost.ts | 2 +- .../toggle-button-secondary-outline.css | 20 + .../toggle-button-secondary-outline.ts | 2 +- .../toggle-button-secondary.css | 20 + .../toggle-button-secondary.ts | 2 +- .../src/preview-examples}/tooltip.css | 4 + .../src/preview-examples/tooltip.ts | 2 +- .../vertical-tabs-with-avatar.css} | 4 + .../vertical-tabs-with-avatar.ts | 2 +- .../src/preview-examples/vertical-tabs.css | 17 + .../src/preview-examples/vertical-tabs.ts | 2 +- .../src/preview-examples/workflow.css | 16 + .../src/preview-examples/workflow.ts | 2 +- packages/angular-test-app/src/styles.scss | 2 +- packages/documentation/package.json | 1 + .../scripts/generate-markdown.ts | 3 - .../PlaygroundV3/angular-snippets.ts | 24 +- .../components/PlaygroundV3/html-snippets.ts | 12 +- .../components/PlaygroundV3/react-snippets.ts | 12 +- .../components/PlaygroundV3/vue-snippets.ts | 13 +- .../src/utils/code-runtime/index.ts | 4 +- packages/documentation/tsconfig.json | 8 +- packages/example-styles/build.mjs | 16 - .../example-styles/css/charts-empty-state.css | 16 - packages/example-styles/css/charts-gauge.css | 6 - packages/example-styles/css/charts.css | 6 - packages/example-styles/css/tile.css | 12 - packages/example-styles/css/workflow.css | 12 - packages/example-styles/package.json | 17 - packages/example-styles/src/index.ts | 23 - packages/example-styles/tsconfig.json | 18 - packages/html-test-app/.gitignore | 1 - packages/html-test-app/package.json | 1 - packages/html-test-app/src/main.js | 2 +- .../src/preview-examples/about-and-legal.css | 17 + .../src/preview-examples/about-and-legal.html | 2 +- .../application-app-switch.css | 17 + .../application-app-switch.html | 2 +- .../application-breakpoints.css | 17 + .../application-breakpoints.html | 2 +- .../src/preview-examples/application.css | 17 + .../src/preview-examples/application.html | 2 +- .../src/preview-examples/basic-navigation.css | 17 + .../preview-examples/basic-navigation.html | 2 +- .../preview-examples/blind-header-actions.css | 16 + .../blind-header-actions.html | 2 +- .../src/preview-examples/blind-variants.css | 16 + .../src/preview-examples/blind-variants.html | 2 +- .../src/preview-examples/blind.css | 16 + .../src/preview-examples/blind.html | 2 +- .../preview-examples/button-danger-ghost.css | 20 + .../preview-examples/button-danger-ghost.html | 2 +- .../button-danger-outline.css | 20 + .../button-danger-outline.html | 2 +- .../src/preview-examples/button-danger.css | 20 + .../src/preview-examples/button-danger.html | 2 +- .../src/preview-examples/button-ghost.css | 20 + .../src/preview-examples/button-ghost.html | 2 +- .../preview-examples/button-grey-ghost.css | 20 + .../preview-examples/button-grey-ghost.html | 2 +- .../button-grey-secondary.css | 20 + .../button-grey-secondary.html | 2 +- .../src/preview-examples/button-grey.css | 20 + .../src/preview-examples/button-grey.html | 2 +- .../src/preview-examples/button-loading.css | 21 + .../src/preview-examples/button-loading.html | 2 +- .../src/preview-examples/button-secondary.css | 20 + .../preview-examples/button-secondary.html | 2 +- .../src/preview-examples/button-text-icon.css | 20 + .../preview-examples/button-text-icon.html | 2 +- .../src/preview-examples/button-with-icon.css | 22 + .../preview-examples/button-with-icon.html | 2 +- .../src/preview-examples/buttons.css | 20 + .../src/preview-examples/buttons.html | 2 +- .../src/preview-examples/card.css | 27 ++ .../src/preview-examples/card.html | 2 +- .../src/preview-examples/chip.css | 21 + .../src/preview-examples/chip.html | 2 +- .../preview-examples/dropdown-button-icon.css | 24 ++ .../dropdown-button-icon.html | 2 +- .../src/preview-examples/dropdown-button.css | 24 ++ .../src/preview-examples/dropdown-button.html | 2 +- .../echarts-bar-horizontal-stacked.css | 19 + .../echarts-bar-horizontal-stacked.html | 2 +- .../preview-examples/echarts-bar-simple.css | 19 + .../preview-examples/echarts-bar-simple.html | 2 +- .../src/preview-examples/echarts-circle.css | 19 + .../src/preview-examples/echarts-circle.html | 2 +- .../preview-examples/echarts-empty-state.css | 19 + .../preview-examples/echarts-empty-state.html | 2 +- .../src/preview-examples/echarts-gauge.css | 19 + .../src/preview-examples/echarts-gauge.html | 2 +- .../echarts-line-advanced.css | 19 + .../echarts-line-advanced.html | 2 +- .../echarts-line-multiple-y-axis.css | 19 + .../echarts-line-multiple-y-axis.html | 2 +- .../preview-examples/echarts-line-simple.css | 19 + .../preview-examples/echarts-line-simple.html | 2 +- .../echarts-line-timeseries.html | 126 ------ .../src/preview-examples/echarts-pie.css | 19 + .../src/preview-examples/echarts-pie.html | 2 +- .../preview-examples/echarts-progress-arc.css | 19 + .../echarts-progress-arc.html | 2 +- .../echarts-progress-circle.css | 19 + .../echarts-progress-circle.html | 2 +- .../preview-examples/echarts-special-3d.css | 19 + .../preview-examples/echarts-special-3d.html | 2 +- .../echarts-special-toolbox.css | 19 + .../echarts-special-toolbox.html | 2 +- .../preview-examples/echarts-special-zoom.css | 19 + .../echarts-special-zoom.html | 2 +- .../src/preview-examples/echarts.css | 19 + .../src/preview-examples/echarts.html | 2 +- .../src/preview-examples/flip-tile.css | 26 ++ .../src/preview-examples/flip-tile.html | 2 +- .../src/preview-examples/global.css | 43 ++ .../src/preview-examples/grid-padding.css | 35 ++ .../src/preview-examples/grid-padding.html | 2 +- .../src/preview-examples/grid-size.css | 35 ++ .../src/preview-examples/grid-size.html | 2 +- .../src/preview-examples/grid.css | 35 ++ .../src/preview-examples/grid.html | 2 +- .../icon-toggle-button-primary-ghost.css | 20 + .../icon-toggle-button-primary-ghost.html | 2 +- .../icon-toggle-button-primary-outline.css | 20 + .../icon-toggle-button-primary-outline.html | 2 +- .../icon-toggle-button-secondary-ghost.css | 20 + .../icon-toggle-button-secondary-ghost.html | 2 +- .../icon-toggle-button-secondary-outline.css | 20 + .../icon-toggle-button-secondary-outline.html | 2 +- .../icon-toggle-button-secondary.css | 20 + .../icon-toggle-button-secondary.html | 2 +- .../src/preview-examples/init.js | 2 +- .../src/preview-examples/kpi.css | 24 ++ .../src/preview-examples/kpi.html | 2 +- .../src/preview-examples/menu-category.css | 17 + .../src/preview-examples/menu-category.html | 2 +- .../menu-with-bottom-tabs.css | 17 + .../menu-with-bottom-tabs.html | 2 +- .../src/preview-examples/message-bar.css | 21 + .../src/preview-examples/message-bar.html | 2 +- .../src/preview-examples/modal-sizes.css | 23 + .../src/preview-examples/modal-sizes.html | 2 +- .../src/preview-examples/pill-variants.css | 16 + .../src/preview-examples/pill-variants.html | 2 +- .../src/preview-examples/pill.css | 20 + .../src/preview-examples/pill.html | 2 +- .../src/preview-examples/popover-news.css | 17 + .../src/preview-examples/popover-news.html | 2 +- .../src/preview-examples/radio-button.css | 21 + .../src/preview-examples/radio-button.html | 2 +- .../src/preview-examples/settings.css | 17 + .../src/preview-examples/settings.html | 2 +- .../src/preview-examples/tabs.css | 26 ++ .../src/preview-examples/tabs.html | 2 +- .../src/preview-examples/theme-switcher.css | 18 + .../src/preview-examples/theme-switcher.html | 2 +- .../src/preview-examples/tile.css | 16 + .../src/preview-examples/tile.html | 2 +- .../toggle-button-primary-ghost.css | 20 + .../toggle-button-primary-ghost.html | 2 +- .../toggle-button-primary-outline.css | 20 + .../toggle-button-primary-outline.html | 2 +- .../toggle-button-primary.css | 20 + .../toggle-button-primary.html | 2 +- .../toggle-button-secondary-ghost.css | 20 + .../toggle-button-secondary-ghost.html | 2 +- .../toggle-button-secondary-outline.css | 20 + .../toggle-button-secondary-outline.html | 2 +- .../toggle-button-secondary.css | 20 + .../toggle-button-secondary.html | 2 +- .../src/preview-examples/tooltip.css | 16 + .../src/preview-examples/tooltip.html | 2 +- .../vertical-tabs-with-avatar.css | 17 + .../vertical-tabs-with-avatar.html | 2 +- .../src/preview-examples/vertical-tabs.css | 17 + .../src/preview-examples/vertical-tabs.html | 2 +- .../src/preview-examples/workflow.css | 16 + .../src/preview-examples/workflow.html | 2 +- packages/html-test-app/vite.config.ts | 2 - packages/react-test-app/.gitignore | 3 - packages/react-test-app/package.json | 2 +- packages/react-test-app/src/App.tsx | 2 - packages/react-test-app/src/main.tsx | 3 +- .../src/preview-examples/about-and-legal.css | 17 + .../src/preview-examples/about-and-legal.tsx | 2 +- .../application-app-switch.css | 17 + .../application-app-switch.tsx | 2 +- .../application-breakpoints.css | 17 + .../application-breakpoints.tsx | 2 +- .../src/preview-examples/application.css | 17 + .../src/preview-examples/application.tsx | 2 +- .../src/preview-examples/basic-navigation.css | 17 + .../src/preview-examples/basic-navigation.tsx | 2 +- .../preview-examples/blind-header-actions.css | 16 + .../preview-examples/blind-header-actions.tsx | 2 +- .../src/preview-examples/blind-variants.css | 16 + .../src/preview-examples/blind-variants.tsx | 2 +- .../src/preview-examples/blind.css | 16 + .../src/preview-examples/blind.tsx | 2 +- .../preview-examples/button-danger-ghost.css | 20 + .../preview-examples/button-danger-ghost.tsx | 2 +- .../button-danger-outline.css | 20 + .../button-danger-outline.tsx | 2 +- .../src/preview-examples/button-danger.css | 20 + .../src/preview-examples/button-danger.tsx | 2 +- .../src/preview-examples/button-ghost.css | 20 + .../src/preview-examples/button-ghost.tsx | 2 +- .../preview-examples/button-grey-ghost.css | 20 + .../preview-examples/button-grey-ghost.tsx | 2 +- .../button-grey-secondary.css | 20 + .../button-grey-secondary.tsx | 2 +- .../src/preview-examples/button-grey.css | 20 + .../src/preview-examples/button-grey.tsx | 2 +- .../src/preview-examples/button-loading.css | 21 + .../src/preview-examples/button-loading.tsx | 2 +- .../src/preview-examples/button-secondary.css | 20 + .../src/preview-examples/button-secondary.tsx | 2 +- .../src/preview-examples/button-text-icon.css | 20 + .../src/preview-examples/button-text-icon.tsx | 2 +- .../src/preview-examples/button-with-icon.css | 22 + .../src/preview-examples/button-with-icon.tsx | 2 +- .../src/preview-examples/buttons.css | 20 + .../src/preview-examples/buttons.tsx | 2 +- .../src/preview-examples/card.css | 27 ++ .../src/preview-examples/card.tsx | 2 +- .../src/preview-examples/chip.css | 21 + .../src/preview-examples/chip.tsx | 2 +- .../preview-examples/dropdown-button-icon.css | 24 ++ .../preview-examples/dropdown-button-icon.tsx | 2 +- .../src/preview-examples/dropdown-button.css | 24 ++ .../src/preview-examples/dropdown-button.tsx | 2 +- .../echarts-bar-horizontal-stacked.css | 19 + .../echarts-bar-horizontal-stacked.tsx | 2 +- .../preview-examples/echarts-bar-simple.css | 19 + .../preview-examples/echarts-bar-simple.tsx | 3 +- .../src/preview-examples/echarts-circle.css | 19 + .../src/preview-examples/echarts-circle.tsx | 3 +- .../preview-examples/echarts-empty-state.css | 19 + .../preview-examples/echarts-empty-state.tsx | 2 +- .../src/preview-examples/echarts-gauge.css | 19 + .../src/preview-examples/echarts-gauge.tsx | 13 +- .../echarts-line-advanced.css | 19 + .../echarts-line-advanced.tsx | 3 +- .../echarts-line-multiple-y-axis.css | 19 + .../echarts-line-multiple-y-axis.tsx | 2 +- .../preview-examples/echarts-line-simple.css | 19 + .../preview-examples/echarts-line-simple.tsx | 7 +- .../src/preview-examples/echarts-pie.css | 19 + .../src/preview-examples/echarts-pie.tsx | 3 + .../preview-examples/echarts-progress-arc.css | 19 + .../preview-examples/echarts-progress-arc.tsx | 3 +- .../echarts-progress-circle.css | 19 + .../echarts-progress-circle.tsx | 3 +- .../preview-examples/echarts-special-3d.css | 19 + .../preview-examples/echarts-special-3d.tsx | 3 +- .../echarts-special-toolbox.css | 19 + .../echarts-special-toolbox.tsx | 3 +- .../preview-examples/echarts-special-zoom.css | 19 + .../preview-examples/echarts-special-zoom.tsx | 3 +- .../src/preview-examples/echarts.css | 19 + .../src/preview-examples/echarts.tsx | 3 +- .../src/preview-examples/flip-tile.css | 26 ++ .../src/preview-examples/flip-tile.tsx | 2 +- .../src/preview-examples/global.css | 43 ++ .../src/preview-examples/grid-padding.css | 35 ++ .../src/preview-examples/grid-padding.tsx | 2 +- .../src/preview-examples/grid-size.css | 35 ++ .../src/preview-examples/grid-size.tsx | 2 +- .../src/preview-examples/grid.css | 35 ++ .../src/preview-examples/grid.tsx | 2 +- .../icon-toggle-button-primary-ghost.css | 20 + .../icon-toggle-button-primary-ghost.tsx | 2 +- .../icon-toggle-button-primary-outline.css | 20 + .../icon-toggle-button-primary-outline.tsx | 2 +- .../icon-toggle-button-secondary-ghost.css | 20 + .../icon-toggle-button-secondary-ghost.tsx | 2 +- .../icon-toggle-button-secondary-outline.css | 20 + .../icon-toggle-button-secondary-outline.tsx | 2 +- .../icon-toggle-button-secondary.css | 20 + .../icon-toggle-button-secondary.tsx | 2 +- .../src/preview-examples/kpi.css | 24 ++ .../src/preview-examples/kpi.tsx | 2 +- .../src/preview-examples/menu-category.css | 17 + .../src/preview-examples/menu-category.tsx | 2 +- .../menu-with-bottom-tabs.css | 17 + .../menu-with-bottom-tabs.tsx | 2 +- .../src/preview-examples/message-bar.css | 21 + .../src/preview-examples/message-bar.tsx | 2 +- .../src/preview-examples/modal-sizes.css | 23 + .../src/preview-examples/modal-sizes.tsx | 2 +- .../src/preview-examples/pill-variants.css | 16 + .../src/preview-examples/pill-variants.tsx | 2 +- .../src/preview-examples/pill.css | 20 + .../src/preview-examples/pill.tsx | 2 +- .../src/preview-examples/popover-news.css | 17 + .../src/preview-examples/popover-news.tsx | 2 +- .../src/preview-examples/radio-button.css | 21 + .../src/preview-examples/radio-button.tsx | 2 +- .../src/preview-examples/settings.css | 17 + .../src/preview-examples/settings.tsx | 2 +- .../src/preview-examples/tabs.css | 26 ++ .../src/preview-examples/tabs.tsx | 2 +- .../src/preview-examples/theme-switcher.css | 18 + .../src/preview-examples/theme-switcher.tsx | 2 +- .../src/preview-examples/tile.css | 16 + .../src/preview-examples/tile.tsx | 2 +- .../toggle-button-primary-ghost.css | 20 + .../toggle-button-primary-ghost.tsx | 2 +- .../toggle-button-primary-outline.css | 20 + .../toggle-button-primary-outline.tsx | 2 +- .../toggle-button-primary.css | 20 + .../toggle-button-primary.tsx | 2 +- .../toggle-button-secondary-ghost.css | 20 + .../toggle-button-secondary-ghost.tsx | 2 +- .../toggle-button-secondary-outline.css | 20 + .../toggle-button-secondary-outline.tsx | 2 +- .../toggle-button-secondary.css | 20 + .../toggle-button-secondary.tsx | 2 +- .../src/preview-examples/tooltip.css | 16 + .../src/preview-examples/tooltip.tsx | 2 +- .../vertical-tabs-with-avatar.css | 17 + .../vertical-tabs-with-avatar.tsx | 2 +- .../src/preview-examples/vertical-tabs.css | 17 + .../src/preview-examples/vertical-tabs.tsx | 2 +- .../src/preview-examples/workflow.css | 16 + .../src/preview-examples/workflow.tsx | 2 +- packages/react-test-app/vite.config.ts | 20 +- packages/vue-test-app/package.json | 2 +- packages/vue-test-app/src/Root.vue | 2 +- packages/vue-test-app/src/main.ts | 2 +- .../src/preview-examples/about-and-legal.css | 17 + .../src/preview-examples/about-and-legal.vue | 2 +- .../application-app-switch.css | 17 + .../application-app-switch.vue | 2 +- .../application-breakpoints.css | 17 + .../application-breakpoints.vue | 2 +- .../src/preview-examples/application.css | 17 + .../src/preview-examples/application.vue | 2 +- .../src/preview-examples/basic-navigation.css | 17 + .../src/preview-examples/basic-navigation.vue | 2 +- .../preview-examples/blind-header-actions.css | 16 + .../preview-examples/blind-header-actions.vue | 2 +- .../src/preview-examples/blind-variants.css | 16 + .../src/preview-examples/blind-variants.vue | 2 +- .../src/preview-examples/blind.css | 16 + .../src/preview-examples/blind.vue | 2 +- .../preview-examples/button-danger-ghost.css | 20 + .../preview-examples/button-danger-ghost.vue | 2 +- .../button-danger-outline.css | 20 + ...econdary.vue => button-danger-outline.vue} | 2 +- .../src/preview-examples/button-danger.css | 20 + .../src/preview-examples/button-danger.vue | 2 +- .../src/preview-examples/button-ghost.css | 20 + .../src/preview-examples/button-ghost.vue | 2 +- .../preview-examples/button-grey-ghost.css | 20 + .../preview-examples/button-grey-ghost.vue | 2 +- .../button-grey-secondary.css | 20 + .../button-grey-secondary.vue | 2 +- .../src/preview-examples/button-grey.css | 20 + .../src/preview-examples/button-grey.vue | 2 +- .../src/preview-examples/button-loading.css | 21 + .../src/preview-examples/button-loading.vue | 2 +- .../src/preview-examples/button-secondary.css | 20 + .../src/preview-examples/button-secondary.vue | 2 +- .../src/preview-examples/button-text-icon.css | 20 + .../src/preview-examples/button-text-icon.vue | 2 +- .../src/preview-examples/button-with-icon.css | 22 + .../src/preview-examples/button-with-icon.vue | 2 +- .../src/preview-examples/buttons.css | 20 + .../src/preview-examples/buttons.vue | 2 +- .../src/preview-examples/card.css | 27 ++ .../src/preview-examples/card.vue | 2 +- .../src/preview-examples/chip.css | 21 + .../src/preview-examples/chip.vue | 2 +- .../preview-examples/dropdown-button-icon.css | 24 ++ .../preview-examples/dropdown-button-icon.vue | 2 +- .../src/preview-examples/dropdown-button.css | 24 ++ .../src/preview-examples/dropdown-button.vue | 2 +- .../echarts-bar-horizontal-stacked.css | 19 + .../echarts-bar-horizontal-stacked.vue | 2 +- .../preview-examples/echarts-bar-simple.css | 19 + .../preview-examples/echarts-bar-simple.vue | 2 +- .../src/preview-examples/echarts-circle.css | 19 + .../src/preview-examples/echarts-circle.vue | 2 +- .../preview-examples/echarts-empty-state.css | 19 + .../preview-examples/echarts-empty-state.vue | 2 +- .../src/preview-examples/echarts-gauge.css | 19 + .../src/preview-examples/echarts-gauge.vue | 2 +- .../echarts-line-advanced.css | 19 + .../echarts-line-advanced.vue | 2 +- .../echarts-line-multiple-y-axis.css | 19 + .../echarts-line-multiple-y-axis.vue | 2 +- .../preview-examples/echarts-line-simple.css | 19 + .../preview-examples/echarts-line-simple.vue | 2 +- .../src/preview-examples/echarts-pie.css | 19 + .../src/preview-examples/echarts-pie.vue | 2 +- .../preview-examples/echarts-progress-arc.css | 19 + .../preview-examples/echarts-progress-arc.vue | 2 +- .../echarts-progress-circle.css | 19 + .../echarts-progress-circle.vue | 2 +- .../preview-examples/echarts-special-3d.css | 19 + .../preview-examples/echarts-special-3d.vue | 2 +- .../echarts-special-toolbox.css | 19 + .../echarts-special-toolbox.vue | 2 +- .../preview-examples/echarts-special-zoom.css | 19 + .../preview-examples/echarts-special-zoom.vue | 2 +- .../src/preview-examples/echarts.css | 19 + .../src/preview-examples/echarts.vue | 12 +- .../src/preview-examples/flip-tile.css | 26 ++ .../src/preview-examples/flip-tile.vue | 2 +- .../src/preview-examples/global.css | 43 ++ .../src/preview-examples/grid-padding.css | 35 ++ .../src/preview-examples/grid-padding.vue | 2 +- .../src/preview-examples/grid-size.css | 35 ++ .../src/preview-examples/grid-size.vue | 2 +- .../src/preview-examples/grid.css | 35 ++ .../src/preview-examples/grid.vue | 2 +- .../icon-toggle-button-primary-ghost.css | 20 + .../icon-toggle-button-primary-ghost.vue | 2 +- .../icon-toggle-button-primary-outline.css | 20 + .../icon-toggle-button-primary-outline.vue | 2 +- .../icon-toggle-button-secondary-ghost.css | 20 + .../icon-toggle-button-secondary-ghost.vue | 2 +- .../icon-toggle-button-secondary-outline.css | 20 + .../icon-toggle-button-secondary-outline.vue | 2 +- .../icon-toggle-button-secondary.css | 20 + .../icon-toggle-button-secondary.vue | 2 +- .../vue-test-app/src/preview-examples/kpi.css | 24 ++ .../vue-test-app/src/preview-examples/kpi.vue | 2 +- .../src/preview-examples/menu-category.css | 17 + .../src/preview-examples/menu-category.vue | 2 +- .../menu-with-bottom-tabs.css | 17 + .../menu-with-bottom-tabs.vue | 2 +- .../src/preview-examples/message-bar.css | 21 + .../src/preview-examples/message-bar.vue | 2 +- .../src/preview-examples/modal-sizes.css | 23 + .../src/preview-examples/modal-sizes.vue | 2 +- .../src/preview-examples/pill-variants.css | 16 + .../src/preview-examples/pill-variants.vue | 2 +- .../src/preview-examples/pill.css | 20 + .../src/preview-examples/pill.vue | 2 +- .../src/preview-examples/popover-news.css | 17 + .../src/preview-examples/popover-news.vue | 2 +- .../src/preview-examples/radio-button.css | 21 + .../src/preview-examples/radio-button.vue | 2 +- .../src/preview-examples/settings.css | 17 + .../src/preview-examples/settings.vue | 2 +- .../src/preview-examples/tabs.css | 26 ++ .../src/preview-examples/tabs.vue | 2 +- .../src/preview-examples/theme-switcher.css | 18 + .../src/preview-examples/theme-switcher.vue | 2 +- .../src/preview-examples/tile.css | 16 + .../src/preview-examples/tile.vue | 2 +- .../toggle-button-primary-ghost.css | 20 + .../toggle-button-primary-ghost.vue | 2 +- .../toggle-button-primary-outline.css | 20 + .../toggle-button-primary-outline.vue | 2 +- .../toggle-button-primary.css | 20 + .../toggle-button-primary.vue | 2 +- .../toggle-button-secondary-ghost.css | 20 + .../toggle-button-secondary-ghost.vue | 2 +- .../toggle-button-secondary-outline.css | 20 + .../toggle-button-secondary-outline.vue | 2 +- .../toggle-button-secondary.css | 20 + .../toggle-button-secondary.vue | 2 +- .../src/preview-examples/tooltip.css | 16 + .../src/preview-examples/tooltip.vue | 2 +- .../vertical-tabs-with-avatar.css | 17 + .../vertical-tabs-with-avatar.vue | 2 +- .../src/preview-examples/vertical-tabs.css | 17 + .../src/preview-examples/vertical-tabs.vue | 2 +- .../src/preview-examples/workflow.css | 16 + .../src/preview-examples/workflow.vue | 2 +- packages/vue-test-app/vite.config.ts | 20 +- pnpm-lock.yaml | 396 +++++++++--------- turbo.json | 3 +- 609 files changed, 6031 insertions(+), 852 deletions(-) create mode 100644 packages/angular-test-app/src/preview-examples/about-and-legal.css create mode 100644 packages/angular-test-app/src/preview-examples/application-app-switch.css create mode 100644 packages/angular-test-app/src/preview-examples/application-breakpoints.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/application.css (61%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/basic-navigation.css (62%) create mode 100644 packages/angular-test-app/src/preview-examples/blind-header-actions.css create mode 100644 packages/angular-test-app/src/preview-examples/blind-variants.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/blind.css (59%) create mode 100644 packages/angular-test-app/src/preview-examples/button-danger-ghost.css create mode 100644 packages/angular-test-app/src/preview-examples/button-danger-outline.css create mode 100644 packages/angular-test-app/src/preview-examples/button-danger.css create mode 100644 packages/angular-test-app/src/preview-examples/button-ghost.css create mode 100644 packages/angular-test-app/src/preview-examples/button-grey-ghost.css create mode 100644 packages/angular-test-app/src/preview-examples/button-grey-secondary.css create mode 100644 packages/angular-test-app/src/preview-examples/button-grey.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/button-loading.css (63%) create mode 100644 packages/angular-test-app/src/preview-examples/button-secondary.css create mode 100644 packages/angular-test-app/src/preview-examples/button-text-icon.css rename packages/{example-styles/css/icon-button.css => angular-test-app/src/preview-examples/button-with-icon.css} (65%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/buttons.css (62%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/card.css (94%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/chip.css (65%) create mode 100644 packages/angular-test-app/src/preview-examples/dropdown-button-icon.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/dropdown-button.css (71%) create mode 100644 packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-bar-simple.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-circle.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-empty-state.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-gauge.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-line-advanced.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-line-simple.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-pie.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-progress-arc.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-progress-circle.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-special-3d.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-special-toolbox.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts-special-zoom.css create mode 100644 packages/angular-test-app/src/preview-examples/echarts.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/flip-tile.css (65%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/global.css (96%) create mode 100644 packages/angular-test-app/src/preview-examples/grid-padding.css create mode 100644 packages/angular-test-app/src/preview-examples/grid-size.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/grid.css (75%) rename packages/{example-styles/css/icon-toggle-buttons.css => angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css} (63%) create mode 100644 packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.css create mode 100644 packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css create mode 100644 packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css create mode 100644 packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/kpi.css (61%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/menu-category.css (51%) create mode 100644 packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/message-bar.css (50%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/modal-sizes.css (68%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/pill-variants.css (59%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/pill.css (63%) create mode 100644 packages/angular-test-app/src/preview-examples/popover-news.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/radio-button.css (66%) create mode 100644 packages/angular-test-app/src/preview-examples/settings.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/tabs.css (62%) rename packages/{example-styles/css => angular-test-app/src/preview-examples}/theme-switcher.css (55%) create mode 100644 packages/angular-test-app/src/preview-examples/tile.css rename packages/{example-styles/css/toggle-buttons.css => angular-test-app/src/preview-examples/toggle-button-primary-ghost.css} (62%) create mode 100644 packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.css create mode 100644 packages/angular-test-app/src/preview-examples/toggle-button-primary.css create mode 100644 packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.css create mode 100644 packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.css create mode 100644 packages/angular-test-app/src/preview-examples/toggle-button-secondary.css rename packages/{example-styles/css => angular-test-app/src/preview-examples}/tooltip.css (59%) rename packages/{example-styles/css/menu.css => angular-test-app/src/preview-examples/vertical-tabs-with-avatar.css} (61%) create mode 100644 packages/angular-test-app/src/preview-examples/vertical-tabs.css create mode 100644 packages/angular-test-app/src/preview-examples/workflow.css delete mode 100644 packages/example-styles/build.mjs delete mode 100644 packages/example-styles/css/charts-empty-state.css delete mode 100644 packages/example-styles/css/charts-gauge.css delete mode 100644 packages/example-styles/css/charts.css delete mode 100644 packages/example-styles/css/tile.css delete mode 100644 packages/example-styles/css/workflow.css delete mode 100644 packages/example-styles/package.json delete mode 100644 packages/example-styles/src/index.ts delete mode 100644 packages/example-styles/tsconfig.json delete mode 100644 packages/html-test-app/.gitignore create mode 100644 packages/html-test-app/src/preview-examples/about-and-legal.css create mode 100644 packages/html-test-app/src/preview-examples/application-app-switch.css create mode 100644 packages/html-test-app/src/preview-examples/application-breakpoints.css create mode 100644 packages/html-test-app/src/preview-examples/application.css create mode 100644 packages/html-test-app/src/preview-examples/basic-navigation.css create mode 100644 packages/html-test-app/src/preview-examples/blind-header-actions.css create mode 100644 packages/html-test-app/src/preview-examples/blind-variants.css create mode 100644 packages/html-test-app/src/preview-examples/blind.css create mode 100644 packages/html-test-app/src/preview-examples/button-danger-ghost.css create mode 100644 packages/html-test-app/src/preview-examples/button-danger-outline.css create mode 100644 packages/html-test-app/src/preview-examples/button-danger.css create mode 100644 packages/html-test-app/src/preview-examples/button-ghost.css create mode 100644 packages/html-test-app/src/preview-examples/button-grey-ghost.css create mode 100644 packages/html-test-app/src/preview-examples/button-grey-secondary.css create mode 100644 packages/html-test-app/src/preview-examples/button-grey.css create mode 100644 packages/html-test-app/src/preview-examples/button-loading.css create mode 100644 packages/html-test-app/src/preview-examples/button-secondary.css create mode 100644 packages/html-test-app/src/preview-examples/button-text-icon.css create mode 100644 packages/html-test-app/src/preview-examples/button-with-icon.css create mode 100644 packages/html-test-app/src/preview-examples/buttons.css create mode 100644 packages/html-test-app/src/preview-examples/card.css create mode 100644 packages/html-test-app/src/preview-examples/chip.css create mode 100644 packages/html-test-app/src/preview-examples/dropdown-button-icon.css create mode 100644 packages/html-test-app/src/preview-examples/dropdown-button.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-bar-simple.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-circle.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-empty-state.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-gauge.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-line-advanced.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-line-simple.css delete mode 100644 packages/html-test-app/src/preview-examples/echarts-line-timeseries.html create mode 100644 packages/html-test-app/src/preview-examples/echarts-pie.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-progress-arc.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-progress-circle.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-special-3d.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-special-toolbox.css create mode 100644 packages/html-test-app/src/preview-examples/echarts-special-zoom.css create mode 100644 packages/html-test-app/src/preview-examples/echarts.css create mode 100644 packages/html-test-app/src/preview-examples/flip-tile.css create mode 100644 packages/html-test-app/src/preview-examples/global.css create mode 100644 packages/html-test-app/src/preview-examples/grid-padding.css create mode 100644 packages/html-test-app/src/preview-examples/grid-size.css create mode 100644 packages/html-test-app/src/preview-examples/grid.css create mode 100644 packages/html-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css create mode 100644 packages/html-test-app/src/preview-examples/icon-toggle-button-primary-outline.css create mode 100644 packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css create mode 100644 packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css create mode 100644 packages/html-test-app/src/preview-examples/icon-toggle-button-secondary.css create mode 100644 packages/html-test-app/src/preview-examples/kpi.css create mode 100644 packages/html-test-app/src/preview-examples/menu-category.css create mode 100644 packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css create mode 100644 packages/html-test-app/src/preview-examples/message-bar.css create mode 100644 packages/html-test-app/src/preview-examples/modal-sizes.css create mode 100644 packages/html-test-app/src/preview-examples/pill-variants.css create mode 100644 packages/html-test-app/src/preview-examples/pill.css create mode 100644 packages/html-test-app/src/preview-examples/popover-news.css create mode 100644 packages/html-test-app/src/preview-examples/radio-button.css create mode 100644 packages/html-test-app/src/preview-examples/settings.css create mode 100644 packages/html-test-app/src/preview-examples/tabs.css create mode 100644 packages/html-test-app/src/preview-examples/theme-switcher.css create mode 100644 packages/html-test-app/src/preview-examples/tile.css create mode 100644 packages/html-test-app/src/preview-examples/toggle-button-primary-ghost.css create mode 100644 packages/html-test-app/src/preview-examples/toggle-button-primary-outline.css create mode 100644 packages/html-test-app/src/preview-examples/toggle-button-primary.css create mode 100644 packages/html-test-app/src/preview-examples/toggle-button-secondary-ghost.css create mode 100644 packages/html-test-app/src/preview-examples/toggle-button-secondary-outline.css create mode 100644 packages/html-test-app/src/preview-examples/toggle-button-secondary.css create mode 100644 packages/html-test-app/src/preview-examples/tooltip.css create mode 100644 packages/html-test-app/src/preview-examples/vertical-tabs-with-avatar.css create mode 100644 packages/html-test-app/src/preview-examples/vertical-tabs.css create mode 100644 packages/html-test-app/src/preview-examples/workflow.css create mode 100644 packages/react-test-app/src/preview-examples/about-and-legal.css create mode 100644 packages/react-test-app/src/preview-examples/application-app-switch.css create mode 100644 packages/react-test-app/src/preview-examples/application-breakpoints.css create mode 100644 packages/react-test-app/src/preview-examples/application.css create mode 100644 packages/react-test-app/src/preview-examples/basic-navigation.css create mode 100644 packages/react-test-app/src/preview-examples/blind-header-actions.css create mode 100644 packages/react-test-app/src/preview-examples/blind-variants.css create mode 100644 packages/react-test-app/src/preview-examples/blind.css create mode 100644 packages/react-test-app/src/preview-examples/button-danger-ghost.css create mode 100644 packages/react-test-app/src/preview-examples/button-danger-outline.css create mode 100644 packages/react-test-app/src/preview-examples/button-danger.css create mode 100644 packages/react-test-app/src/preview-examples/button-ghost.css create mode 100644 packages/react-test-app/src/preview-examples/button-grey-ghost.css create mode 100644 packages/react-test-app/src/preview-examples/button-grey-secondary.css create mode 100644 packages/react-test-app/src/preview-examples/button-grey.css create mode 100644 packages/react-test-app/src/preview-examples/button-loading.css create mode 100644 packages/react-test-app/src/preview-examples/button-secondary.css create mode 100644 packages/react-test-app/src/preview-examples/button-text-icon.css create mode 100644 packages/react-test-app/src/preview-examples/button-with-icon.css create mode 100644 packages/react-test-app/src/preview-examples/buttons.css create mode 100644 packages/react-test-app/src/preview-examples/card.css create mode 100644 packages/react-test-app/src/preview-examples/chip.css create mode 100644 packages/react-test-app/src/preview-examples/dropdown-button-icon.css create mode 100644 packages/react-test-app/src/preview-examples/dropdown-button.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-bar-simple.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-circle.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-empty-state.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-gauge.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-line-advanced.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-line-multiple-y-axis.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-line-simple.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-pie.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-progress-arc.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-progress-circle.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-special-3d.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-special-toolbox.css create mode 100644 packages/react-test-app/src/preview-examples/echarts-special-zoom.css create mode 100644 packages/react-test-app/src/preview-examples/echarts.css create mode 100644 packages/react-test-app/src/preview-examples/flip-tile.css create mode 100644 packages/react-test-app/src/preview-examples/global.css create mode 100644 packages/react-test-app/src/preview-examples/grid-padding.css create mode 100644 packages/react-test-app/src/preview-examples/grid-size.css create mode 100644 packages/react-test-app/src/preview-examples/grid.css create mode 100644 packages/react-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css create mode 100644 packages/react-test-app/src/preview-examples/icon-toggle-button-primary-outline.css create mode 100644 packages/react-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css create mode 100644 packages/react-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css create mode 100644 packages/react-test-app/src/preview-examples/icon-toggle-button-secondary.css create mode 100644 packages/react-test-app/src/preview-examples/kpi.css create mode 100644 packages/react-test-app/src/preview-examples/menu-category.css create mode 100644 packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.css create mode 100644 packages/react-test-app/src/preview-examples/message-bar.css create mode 100644 packages/react-test-app/src/preview-examples/modal-sizes.css create mode 100644 packages/react-test-app/src/preview-examples/pill-variants.css create mode 100644 packages/react-test-app/src/preview-examples/pill.css create mode 100644 packages/react-test-app/src/preview-examples/popover-news.css create mode 100644 packages/react-test-app/src/preview-examples/radio-button.css create mode 100644 packages/react-test-app/src/preview-examples/settings.css create mode 100644 packages/react-test-app/src/preview-examples/tabs.css create mode 100644 packages/react-test-app/src/preview-examples/theme-switcher.css create mode 100644 packages/react-test-app/src/preview-examples/tile.css create mode 100644 packages/react-test-app/src/preview-examples/toggle-button-primary-ghost.css create mode 100644 packages/react-test-app/src/preview-examples/toggle-button-primary-outline.css create mode 100644 packages/react-test-app/src/preview-examples/toggle-button-primary.css create mode 100644 packages/react-test-app/src/preview-examples/toggle-button-secondary-ghost.css create mode 100644 packages/react-test-app/src/preview-examples/toggle-button-secondary-outline.css create mode 100644 packages/react-test-app/src/preview-examples/toggle-button-secondary.css create mode 100644 packages/react-test-app/src/preview-examples/tooltip.css create mode 100644 packages/react-test-app/src/preview-examples/vertical-tabs-with-avatar.css create mode 100644 packages/react-test-app/src/preview-examples/vertical-tabs.css create mode 100644 packages/react-test-app/src/preview-examples/workflow.css create mode 100644 packages/vue-test-app/src/preview-examples/about-and-legal.css create mode 100644 packages/vue-test-app/src/preview-examples/application-app-switch.css create mode 100644 packages/vue-test-app/src/preview-examples/application-breakpoints.css create mode 100644 packages/vue-test-app/src/preview-examples/application.css create mode 100644 packages/vue-test-app/src/preview-examples/basic-navigation.css create mode 100644 packages/vue-test-app/src/preview-examples/blind-header-actions.css create mode 100644 packages/vue-test-app/src/preview-examples/blind-variants.css create mode 100644 packages/vue-test-app/src/preview-examples/blind.css create mode 100644 packages/vue-test-app/src/preview-examples/button-danger-ghost.css create mode 100644 packages/vue-test-app/src/preview-examples/button-danger-outline.css rename packages/vue-test-app/src/preview-examples/{button-danger-secondary.vue => button-danger-outline.vue} (88%) create mode 100644 packages/vue-test-app/src/preview-examples/button-danger.css create mode 100644 packages/vue-test-app/src/preview-examples/button-ghost.css create mode 100644 packages/vue-test-app/src/preview-examples/button-grey-ghost.css create mode 100644 packages/vue-test-app/src/preview-examples/button-grey-secondary.css create mode 100644 packages/vue-test-app/src/preview-examples/button-grey.css create mode 100644 packages/vue-test-app/src/preview-examples/button-loading.css create mode 100644 packages/vue-test-app/src/preview-examples/button-secondary.css create mode 100644 packages/vue-test-app/src/preview-examples/button-text-icon.css create mode 100644 packages/vue-test-app/src/preview-examples/button-with-icon.css create mode 100644 packages/vue-test-app/src/preview-examples/buttons.css create mode 100644 packages/vue-test-app/src/preview-examples/card.css create mode 100644 packages/vue-test-app/src/preview-examples/chip.css create mode 100644 packages/vue-test-app/src/preview-examples/dropdown-button-icon.css create mode 100644 packages/vue-test-app/src/preview-examples/dropdown-button.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-bar-simple.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-circle.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-empty-state.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-gauge.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-line-advanced.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-line-multiple-y-axis.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-line-simple.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-pie.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-progress-arc.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-progress-circle.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-special-3d.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-special-toolbox.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts-special-zoom.css create mode 100644 packages/vue-test-app/src/preview-examples/echarts.css create mode 100644 packages/vue-test-app/src/preview-examples/flip-tile.css create mode 100644 packages/vue-test-app/src/preview-examples/global.css create mode 100644 packages/vue-test-app/src/preview-examples/grid-padding.css create mode 100644 packages/vue-test-app/src/preview-examples/grid-size.css create mode 100644 packages/vue-test-app/src/preview-examples/grid.css create mode 100644 packages/vue-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css create mode 100644 packages/vue-test-app/src/preview-examples/icon-toggle-button-primary-outline.css create mode 100644 packages/vue-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css create mode 100644 packages/vue-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css create mode 100644 packages/vue-test-app/src/preview-examples/icon-toggle-button-secondary.css create mode 100644 packages/vue-test-app/src/preview-examples/kpi.css create mode 100644 packages/vue-test-app/src/preview-examples/menu-category.css create mode 100644 packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.css create mode 100644 packages/vue-test-app/src/preview-examples/message-bar.css create mode 100644 packages/vue-test-app/src/preview-examples/modal-sizes.css create mode 100644 packages/vue-test-app/src/preview-examples/pill-variants.css create mode 100644 packages/vue-test-app/src/preview-examples/pill.css create mode 100644 packages/vue-test-app/src/preview-examples/popover-news.css create mode 100644 packages/vue-test-app/src/preview-examples/radio-button.css create mode 100644 packages/vue-test-app/src/preview-examples/settings.css create mode 100644 packages/vue-test-app/src/preview-examples/tabs.css create mode 100644 packages/vue-test-app/src/preview-examples/theme-switcher.css create mode 100644 packages/vue-test-app/src/preview-examples/tile.css create mode 100644 packages/vue-test-app/src/preview-examples/toggle-button-primary-ghost.css create mode 100644 packages/vue-test-app/src/preview-examples/toggle-button-primary-outline.css create mode 100644 packages/vue-test-app/src/preview-examples/toggle-button-primary.css create mode 100644 packages/vue-test-app/src/preview-examples/toggle-button-secondary-ghost.css create mode 100644 packages/vue-test-app/src/preview-examples/toggle-button-secondary-outline.css create mode 100644 packages/vue-test-app/src/preview-examples/toggle-button-secondary.css create mode 100644 packages/vue-test-app/src/preview-examples/tooltip.css create mode 100644 packages/vue-test-app/src/preview-examples/vertical-tabs-with-avatar.css create mode 100644 packages/vue-test-app/src/preview-examples/vertical-tabs.css create mode 100644 packages/vue-test-app/src/preview-examples/workflow.css diff --git a/ix.code-workspace b/ix.code-workspace index fd772789d4a..0840050effd 100644 --- a/ix.code-workspace +++ b/ix.code-workspace @@ -52,10 +52,6 @@ "name": "eslint-config", "path": "./packages/eslint-config-ix" }, - { - "name": "example-styles", - "path": "./packages/example-styles" - }, { "name": "figma-plugin", "path": "./packages/figma-plugin" diff --git a/packages/angular-test-app/package.json b/packages/angular-test-app/package.json index 1bf7c601fc5..2afb7fca6bd 100644 --- a/packages/angular-test-app/package.json +++ b/packages/angular-test-app/package.json @@ -29,7 +29,7 @@ "ag-grid-community": "^30.2.0", "echarts": "^5.5.1", "echarts-gl": "^2.0.9", - "example-styles": "workspace:*", + "html-test-app": "workspace:*", "ngx-echarts": "~14.0.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", diff --git a/packages/angular-test-app/scripts/copy-preview.mjs b/packages/angular-test-app/scripts/copy-preview.mjs index 96267ffe09e..ccd1d48d1d7 100644 --- a/packages/angular-test-app/scripts/copy-preview.mjs +++ b/packages/angular-test-app/scripts/copy-preview.mjs @@ -6,10 +6,33 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import { copyPreviewStyles } from 'example-styles'; import path from 'path'; - +import fs from 'fs'; +import fsp from 'fs/promises'; const __dirname = path.resolve(); -const stylesPath = path.resolve(__dirname, 'src', 'preview-examples', 'styles'); -copyPreviewStyles(stylesPath); +const previewPath = path.join( + __dirname, + 'node_modules', + 'html-test-app', + 'src', + 'preview-examples' +); + +(async () => { + console.log('Copying preview styles to html-test-app...'); + const cssFiles = fs + .readdirSync(previewPath) + .filter((f) => f.endsWith('.css')); + + await Promise.all( + cssFiles.map((cssFile) => + fsp.copyFile( + path.join(previewPath, cssFile), + path.join(__dirname, 'src', 'preview-examples', cssFile) + ) + ) + ); + + console.log('Done'); +})(); diff --git a/packages/angular-test-app/src/preview-examples/about-and-legal.css b/packages/angular-test-app/src/preview-examples/about-and-legal.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/about-and-legal.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/angular-test-app/src/preview-examples/about-and-legal.ts b/packages/angular-test-app/src/preview-examples/about-and-legal.ts index 03458ec7429..5a7e7b82950 100644 --- a/packages/angular-test-app/src/preview-examples/about-and-legal.ts +++ b/packages/angular-test-app/src/preview-examples/about-and-legal.ts @@ -12,7 +12,7 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './about-and-legal.html', - styleUrls: ['./styles/application.css'], + styleUrls: ['./about-and-legal.css'], }) export default class AboutAndLegal implements AfterViewInit { @ViewChild('menu', { read: ElementRef }) diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.css b/packages/angular-test-app/src/preview-examples/application-app-switch.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/application-app-switch.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.ts b/packages/angular-test-app/src/preview-examples/application-app-switch.ts index 80fb72e64ad..56c311dabb7 100644 --- a/packages/angular-test-app/src/preview-examples/application-app-switch.ts +++ b/packages/angular-test-app/src/preview-examples/application-app-switch.ts @@ -13,7 +13,7 @@ import { AppSwitchConfiguration } from '@siemens/ix'; @Component({ selector: 'app-example', templateUrl: './application-app-switch.html', - styleUrls: ['./styles/application.css'], + styleUrls: ['./application-app-switch.css'], }) export default class ApplicationAppSwitchExample { appSwitchConfig: AppSwitchConfiguration = { diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.css b/packages/angular-test-app/src/preview-examples/application-breakpoints.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/application-breakpoints.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.ts b/packages/angular-test-app/src/preview-examples/application-breakpoints.ts index 41f551db77d..521c7cb09b0 100644 --- a/packages/angular-test-app/src/preview-examples/application-breakpoints.ts +++ b/packages/angular-test-app/src/preview-examples/application-breakpoints.ts @@ -11,7 +11,7 @@ import { Breakpoint } from '@siemens/ix'; @Component({ selector: 'app-example', - styleUrls: ['./styles/application.css'], + styleUrls: ['./application-breakpoints.css'], templateUrl: './application-breakpoints.html', }) export default class ApplicationBreakpointExample { diff --git a/packages/example-styles/css/application.css b/packages/angular-test-app/src/preview-examples/application.css similarity index 61% rename from packages/example-styles/css/application.css rename to packages/angular-test-app/src/preview-examples/application.css index 1466d88b8ce..a726a2876a5 100644 --- a/packages/example-styles/css/application.css +++ b/packages/angular-test-app/src/preview-examples/application.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-application { width: 100vw; diff --git a/packages/angular-test-app/src/preview-examples/application.ts b/packages/angular-test-app/src/preview-examples/application.ts index f1f65f12679..f7d097de768 100644 --- a/packages/angular-test-app/src/preview-examples/application.ts +++ b/packages/angular-test-app/src/preview-examples/application.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './application.html', - styleUrls: ['./styles/application.css'], + styleUrls: ['./application.css'], }) export default class ApplicationExample {} diff --git a/packages/example-styles/css/basic-navigation.css b/packages/angular-test-app/src/preview-examples/basic-navigation.css similarity index 62% rename from packages/example-styles/css/basic-navigation.css rename to packages/angular-test-app/src/preview-examples/basic-navigation.css index ed4483b7aad..1c40937575d 100644 --- a/packages/example-styles/css/basic-navigation.css +++ b/packages/angular-test-app/src/preview-examples/basic-navigation.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-basic-navigation { width: 100vw; diff --git a/packages/angular-test-app/src/preview-examples/basic-navigation.ts b/packages/angular-test-app/src/preview-examples/basic-navigation.ts index 36cb3c5c626..110ee0fe977 100644 --- a/packages/angular-test-app/src/preview-examples/basic-navigation.ts +++ b/packages/angular-test-app/src/preview-examples/basic-navigation.ts @@ -20,6 +20,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/basic-navigation.css'], + styleUrls: ['./basic-navigation.css'], }) export default class BasicNavigation {} diff --git a/packages/angular-test-app/src/preview-examples/blind-header-actions.css b/packages/angular-test-app/src/preview-examples/blind-header-actions.css new file mode 100644 index 00000000000..84fea6a2fee --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/blind-header-actions.css @@ -0,0 +1,16 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-blind { + margin: 0.5rem 0; +} diff --git a/packages/angular-test-app/src/preview-examples/blind-header-actions.ts b/packages/angular-test-app/src/preview-examples/blind-header-actions.ts index 3946f1e8e0f..e091d87c946 100644 --- a/packages/angular-test-app/src/preview-examples/blind-header-actions.ts +++ b/packages/angular-test-app/src/preview-examples/blind-header-actions.ts @@ -32,6 +32,6 @@ import { Component } from '@angular/core'; sit amet. `, - styleUrls: ['./styles/blind.css'], + styleUrls: ['./blind-header-actions.css'], }) export default class Blind {} diff --git a/packages/angular-test-app/src/preview-examples/blind-variants.css b/packages/angular-test-app/src/preview-examples/blind-variants.css new file mode 100644 index 00000000000..84fea6a2fee --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/blind-variants.css @@ -0,0 +1,16 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-blind { + margin: 0.5rem 0; +} diff --git a/packages/angular-test-app/src/preview-examples/blind-variants.ts b/packages/angular-test-app/src/preview-examples/blind-variants.ts index a74aad5df66..8542aca4437 100644 --- a/packages/angular-test-app/src/preview-examples/blind-variants.ts +++ b/packages/angular-test-app/src/preview-examples/blind-variants.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './blind-variants.html', - styleUrls: ['./styles/blind.css'], + styleUrls: ['./blind-variants.css'], }) export default class Blind {} diff --git a/packages/example-styles/css/blind.css b/packages/angular-test-app/src/preview-examples/blind.css similarity index 59% rename from packages/example-styles/css/blind.css rename to packages/angular-test-app/src/preview-examples/blind.css index 999fb0fd26e..84fea6a2fee 100644 --- a/packages/example-styles/css/blind.css +++ b/packages/angular-test-app/src/preview-examples/blind.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-blind { margin: 0.5rem 0; diff --git a/packages/angular-test-app/src/preview-examples/blind.ts b/packages/angular-test-app/src/preview-examples/blind.ts index f221c58b9f4..0a55976c2b8 100644 --- a/packages/angular-test-app/src/preview-examples/blind.ts +++ b/packages/angular-test-app/src/preview-examples/blind.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './blind.html', - styleUrls: ['./styles/blind.css'], + styleUrls: ['./blind.css'], }) export default class Blind {} diff --git a/packages/angular-test-app/src/preview-examples/button-danger-ghost.css b/packages/angular-test-app/src/preview-examples/button-danger-ghost.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-danger-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-danger-outline.css b/packages/angular-test-app/src/preview-examples/button-danger-outline.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-danger-outline.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-danger-outline.ts b/packages/angular-test-app/src/preview-examples/button-danger-outline.ts index f2f7386e9d2..772a3710cb2 100644 --- a/packages/angular-test-app/src/preview-examples/button-danger-outline.ts +++ b/packages/angular-test-app/src/preview-examples/button-danger-outline.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './button-danger-outline.html', - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-danger-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-danger.css b/packages/angular-test-app/src/preview-examples/button-danger.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-danger.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-danger.ts b/packages/angular-test-app/src/preview-examples/button-danger.ts index 1ff01bfb56b..d2ae7999bcf 100644 --- a/packages/angular-test-app/src/preview-examples/button-danger.ts +++ b/packages/angular-test-app/src/preview-examples/button-danger.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './button-danger.html', - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-danger.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-ghost.css b/packages/angular-test-app/src/preview-examples/button-ghost.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-ghost.ts b/packages/angular-test-app/src/preview-examples/button-ghost.ts index 4f189d46a98..08f9825342d 100644 --- a/packages/angular-test-app/src/preview-examples/button-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/button-ghost.ts @@ -15,6 +15,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-grey-ghost.css b/packages/angular-test-app/src/preview-examples/button-grey-ghost.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-grey-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-grey-ghost.ts b/packages/angular-test-app/src/preview-examples/button-grey-ghost.ts index 77620b0060b..406a610b541 100644 --- a/packages/angular-test-app/src/preview-examples/button-grey-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/button-grey-ghost.ts @@ -12,7 +12,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', template: buttonGreyGhost(), - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-grey-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-grey-secondary.css b/packages/angular-test-app/src/preview-examples/button-grey-secondary.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-grey-secondary.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-grey-secondary.ts b/packages/angular-test-app/src/preview-examples/button-grey-secondary.ts index 9ace014073b..079ad202a5c 100644 --- a/packages/angular-test-app/src/preview-examples/button-grey-secondary.ts +++ b/packages/angular-test-app/src/preview-examples/button-grey-secondary.ts @@ -15,6 +15,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-grey-secondary.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-grey.css b/packages/angular-test-app/src/preview-examples/button-grey.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-grey.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-grey.ts b/packages/angular-test-app/src/preview-examples/button-grey.ts index 09fa71e661f..1f21c197b98 100644 --- a/packages/angular-test-app/src/preview-examples/button-grey.ts +++ b/packages/angular-test-app/src/preview-examples/button-grey.ts @@ -15,6 +15,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-grey.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/button-loading.css b/packages/angular-test-app/src/preview-examples/button-loading.css similarity index 63% rename from packages/example-styles/css/button-loading.css rename to packages/angular-test-app/src/preview-examples/button-loading.css index 70968a68204..765cd8a2967 100644 --- a/packages/example-styles/css/button-loading.css +++ b/packages/angular-test-app/src/preview-examples/button-loading.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/button-loading.ts b/packages/angular-test-app/src/preview-examples/button-loading.ts index 92692fb3306..33401290af6 100644 --- a/packages/angular-test-app/src/preview-examples/button-loading.ts +++ b/packages/angular-test-app/src/preview-examples/button-loading.ts @@ -12,7 +12,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', template: './button-loading.html', - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-loading.css'], }) export default class ButtonLoading { loading = false; diff --git a/packages/angular-test-app/src/preview-examples/button-secondary.css b/packages/angular-test-app/src/preview-examples/button-secondary.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-secondary.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-secondary.ts b/packages/angular-test-app/src/preview-examples/button-secondary.ts index c9fe9b20a8a..33b08139283 100644 --- a/packages/angular-test-app/src/preview-examples/button-secondary.ts +++ b/packages/angular-test-app/src/preview-examples/button-secondary.ts @@ -13,6 +13,6 @@ import { Component } from '@angular/core'; selector: 'app-example', template: ` Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-secondary.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-text-icon.css b/packages/angular-test-app/src/preview-examples/button-text-icon.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-text-icon.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-text-icon.ts b/packages/angular-test-app/src/preview-examples/button-text-icon.ts index 2e7278906f4..6c8e429bf6f 100644 --- a/packages/angular-test-app/src/preview-examples/button-text-icon.ts +++ b/packages/angular-test-app/src/preview-examples/button-text-icon.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-text-icon.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/icon-button.css b/packages/angular-test-app/src/preview-examples/button-with-icon.css similarity index 65% rename from packages/example-styles/css/icon-button.css rename to packages/angular-test-app/src/preview-examples/button-with-icon.css index c219996bf0d..d5bf8521d38 100644 --- a/packages/example-styles/css/icon-button.css +++ b/packages/angular-test-app/src/preview-examples/button-with-icon.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/button-with-icon.ts b/packages/angular-test-app/src/preview-examples/button-with-icon.ts index c0ef2be5a06..793ad740f5e 100644 --- a/packages/angular-test-app/src/preview-examples/button-with-icon.ts +++ b/packages/angular-test-app/src/preview-examples/button-with-icon.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './button-with-icon.html', - styleUrls: ['./styles/icon-button.css'], + styleUrls: ['./button-with-icon.css'], }) export default class ButtonWithIcon {} diff --git a/packages/example-styles/css/buttons.css b/packages/angular-test-app/src/preview-examples/buttons.css similarity index 62% rename from packages/example-styles/css/buttons.css rename to packages/angular-test-app/src/preview-examples/buttons.css index d591a858c91..38340199f99 100644 --- a/packages/example-styles/css/buttons.css +++ b/packages/angular-test-app/src/preview-examples/buttons.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/buttons.ts b/packages/angular-test-app/src/preview-examples/buttons.ts index b76fb1d209d..69f89588ab6 100644 --- a/packages/angular-test-app/src/preview-examples/buttons.ts +++ b/packages/angular-test-app/src/preview-examples/buttons.ts @@ -15,6 +15,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./buttons.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/card.css b/packages/angular-test-app/src/preview-examples/card.css similarity index 94% rename from packages/example-styles/css/card.css rename to packages/angular-test-app/src/preview-examples/card.css index 178d051cec7..8cc004c1fe4 100644 --- a/packages/example-styles/css/card.css +++ b/packages/angular-test-app/src/preview-examples/card.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-card { height: 15.75rem; diff --git a/packages/angular-test-app/src/preview-examples/card.ts b/packages/angular-test-app/src/preview-examples/card.ts index 22aa27f37fa..7c834e4b076 100644 --- a/packages/angular-test-app/src/preview-examples/card.ts +++ b/packages/angular-test-app/src/preview-examples/card.ts @@ -12,7 +12,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './card.html', - styleUrls: ['./styles/card.css'], + styleUrls: ['./card.css'], }) export default class Card { onClick(event: Event) { diff --git a/packages/example-styles/css/chip.css b/packages/angular-test-app/src/preview-examples/chip.css similarity index 65% rename from packages/example-styles/css/chip.css rename to packages/angular-test-app/src/preview-examples/chip.css index 38d33a422f8..02edd4ed6bf 100644 --- a/packages/example-styles/css/chip.css +++ b/packages/angular-test-app/src/preview-examples/chip.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .chip { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/chip.ts b/packages/angular-test-app/src/preview-examples/chip.ts index 455385c8417..fe3def6aec4 100644 --- a/packages/angular-test-app/src/preview-examples/chip.ts +++ b/packages/angular-test-app/src/preview-examples/chip.ts @@ -37,6 +37,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/chip.css'], + styleUrls: ['./chip.css'], }) export default class Chip {} diff --git a/packages/angular-test-app/src/preview-examples/dropdown-button-icon.css b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.css new file mode 100644 index 00000000000..aa2399617b0 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.css @@ -0,0 +1,24 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.dropdown-button { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + max-width: 20rem; +} + +.dropdown-button > ix-dropdown-button { + margin-bottom: 0.5rem; +} diff --git a/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts index af8857217a3..373b5d14aff 100644 --- a/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts +++ b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - styleUrls: ['./styles/dropdown-button.css'], + styleUrls: ['./dropdown-button-icon.css'], template: ` `, - styleUrls: ['./styles/dropdown-button.css'], + styleUrls: ['./dropdown-button.css'], }) export default class Dropdown {} diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts index ace3ccbf80c..a0cf01339c1 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts @@ -16,7 +16,7 @@ import { BarSeriesOption, EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-bar-horizontal-stacked.html', - styleUrls: ['./styles/charts.css'], + styleUrls: ['./echarts-bar-horizontal-stacked.css'], }) export default class EchartsBarHorizontalStacked implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-simple.css b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts index ba75783b049..a98ac0f89c9 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-bar-simple.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-bar-simple.css"], }) export default class EchartsBarSimple implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-circle.css b/packages/angular-test-app/src/preview-examples/echarts-circle.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-circle.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-circle.ts b/packages/angular-test-app/src/preview-examples/echarts-circle.ts index bcf251ddb64..23277599f96 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-circle.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-circle.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-circle.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-circle.css"], }) export default class EchartsCircle implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-empty-state.css b/packages/angular-test-app/src/preview-examples/echarts-empty-state.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-empty-state.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts b/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts index d17ca27d192..f63450d51f5 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-empty-state.html', - styleUrls: ["./styles/charts-empty-state.css"], + styleUrls: ['./echarts-empty-state.css'], }) export default class EchartsLineSimple implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-gauge.css b/packages/angular-test-app/src/preview-examples/echarts-gauge.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-gauge.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-gauge.ts b/packages/angular-test-app/src/preview-examples/echarts-gauge.ts index d77944e5dca..64e18a0b98b 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-gauge.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-gauge.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-gauge.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-gauge.css"], }) export default class EchartsGauge implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-advanced.css b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts index d137ba867ce..3921aceeb22 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-line-advanced.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-line-advanced.css"], }) export default class EchartsLineAdvanced implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.css b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts index a268bda273f..89f9405a251 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts @@ -21,7 +21,7 @@ import { YAXisOption } from 'echarts/types/dist/shared'; @Component({ selector: 'app-example', templateUrl: './echarts-line-multiple-y-axis.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-line-multiple-y-axis.css"], }) export default class EchartsLineMultipleYAxis implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-simple.css b/packages/angular-test-app/src/preview-examples/echarts-line-simple.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-line-simple.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts b/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts index 5168647f438..6d1365d2852 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-line-simple.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-line-simple.css"], }) export default class EchartsLineSimple implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-pie.css b/packages/angular-test-app/src/preview-examples/echarts-pie.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-pie.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-pie.ts b/packages/angular-test-app/src/preview-examples/echarts-pie.ts index a97ade149ae..e3073392c5d 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-pie.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-pie.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-pie.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-pie.css"], }) export default class EchartsPie implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-arc.css b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.css new file mode 100644 index 00000000000..38b53e74346 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts-gauge { + position: relative; + width: 100%; + height: 20rem; + padding-top: 3rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts index 381fd57a831..c717037f05d 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-progress-arc.html', - styleUrls: ["./styles/charts-gauge.css"], + styleUrls: ["./echarts-progress-arc.css"], }) export default class EchartsProgressArc implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-circle.css b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.css new file mode 100644 index 00000000000..38b53e74346 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts-gauge { + position: relative; + width: 100%; + height: 20rem; + padding-top: 3rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts index 90d3fd61492..f634dd31b60 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-progress-circle.html', - styleUrls: ["./styles/charts-gauge.css"], + styleUrls: ["./echarts-progress-circle.css"], }) export default class EchartsProgressCircle implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-3d.css b/packages/angular-test-app/src/preview-examples/echarts-special-3d.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-special-3d.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts b/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts index 33387e98c78..2ec21c5e7eb 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts @@ -21,7 +21,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-special-3d.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-special-3d.css"], }) export default class EchartsSpecial3d implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.css b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts index 53e2cff3b6f..7a7be99c68a 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-special-toolbox.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-special-toolbox.css"], }) export default class EchartsSpecialToolbox implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-zoom.css b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts index 685561e6324..c1059183804 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts @@ -21,7 +21,7 @@ import { OrdinalRawValue } from 'echarts/types/src/util/types'; @Component({ selector: 'app-example', templateUrl: './echarts-special-zoom.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-special-zoom.css"], }) export default class EchartsSpecialZoom implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts.css b/packages/angular-test-app/src/preview-examples/echarts.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts.ts b/packages/angular-test-app/src/preview-examples/echarts.ts index bc1d4883b61..e2015f9aba7 100644 --- a/packages/angular-test-app/src/preview-examples/echarts.ts +++ b/packages/angular-test-app/src/preview-examples/echarts.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts.css"], }) export default class Echarts implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/example-styles/css/flip-tile.css b/packages/angular-test-app/src/preview-examples/flip-tile.css similarity index 65% rename from packages/example-styles/css/flip-tile.css rename to packages/angular-test-app/src/preview-examples/flip-tile.css index 094cefdc47f..49d1a64ba30 100644 --- a/packages/example-styles/css/flip-tile.css +++ b/packages/angular-test-app/src/preview-examples/flip-tile.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .flip-tile { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/flip-tile.ts b/packages/angular-test-app/src/preview-examples/flip-tile.ts index 98eceecc905..d2de629969c 100644 --- a/packages/angular-test-app/src/preview-examples/flip-tile.ts +++ b/packages/angular-test-app/src/preview-examples/flip-tile.ts @@ -76,6 +76,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/flip-tile.css'], + styleUrls: ['./flip-tile.css'], }) export default class FlipTile {} diff --git a/packages/example-styles/css/global.css b/packages/angular-test-app/src/preview-examples/global.css similarity index 96% rename from packages/example-styles/css/global.css rename to packages/angular-test-app/src/preview-examples/global.css index 2acf50f0a3d..1a55311fdb6 100644 --- a/packages/example-styles/css/global.css +++ b/packages/angular-test-app/src/preview-examples/global.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ @import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; diff --git a/packages/angular-test-app/src/preview-examples/grid-padding.css b/packages/angular-test-app/src/preview-examples/grid-padding.css new file mode 100644 index 00000000000..3229d7cf61a --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/grid-padding.css @@ -0,0 +1,35 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.grid { + padding-top: 1rem; + padding-bottom: 0.25rem; + background-color: var(--theme-color-ghost); +} + +.grid > ix-layout-grid { + margin-bottom: 1rem; +} + +.grid > ix-layout-grid > ix-row > ix-col ix-typography { + display: flex; + padding: 0.5rem; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 0; + align-self: stretch; + border: 1px solid var(--theme-color-soft-bdr); + background: var(--theme-color-ghost); + border-radius: 3px; +} diff --git a/packages/angular-test-app/src/preview-examples/grid-padding.ts b/packages/angular-test-app/src/preview-examples/grid-padding.ts index 9a6b780dc7e..f8b80ea9e53 100644 --- a/packages/angular-test-app/src/preview-examples/grid-padding.ts +++ b/packages/angular-test-app/src/preview-examples/grid-padding.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './grid-padding.html', - styleUrls: ['./styles/grid.css'], + styleUrls: ['./grid-padding.css'], }) export default class GridPadding {} diff --git a/packages/angular-test-app/src/preview-examples/grid-size.css b/packages/angular-test-app/src/preview-examples/grid-size.css new file mode 100644 index 00000000000..3229d7cf61a --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/grid-size.css @@ -0,0 +1,35 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.grid { + padding-top: 1rem; + padding-bottom: 0.25rem; + background-color: var(--theme-color-ghost); +} + +.grid > ix-layout-grid { + margin-bottom: 1rem; +} + +.grid > ix-layout-grid > ix-row > ix-col ix-typography { + display: flex; + padding: 0.5rem; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 0; + align-self: stretch; + border: 1px solid var(--theme-color-soft-bdr); + background: var(--theme-color-ghost); + border-radius: 3px; +} diff --git a/packages/angular-test-app/src/preview-examples/grid-size.ts b/packages/angular-test-app/src/preview-examples/grid-size.ts index 4ffb2250cc1..18a0641fae4 100644 --- a/packages/angular-test-app/src/preview-examples/grid-size.ts +++ b/packages/angular-test-app/src/preview-examples/grid-size.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './grid-size.html', - styleUrls: ['./styles/grid.css'], + styleUrls: ['./grid-size.css'], }) export default class GridSize {} diff --git a/packages/example-styles/css/grid.css b/packages/angular-test-app/src/preview-examples/grid.css similarity index 75% rename from packages/example-styles/css/grid.css rename to packages/angular-test-app/src/preview-examples/grid.css index a0ec412e6a4..3229d7cf61a 100644 --- a/packages/example-styles/css/grid.css +++ b/packages/angular-test-app/src/preview-examples/grid.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .grid { padding-top: 1rem; diff --git a/packages/angular-test-app/src/preview-examples/grid.ts b/packages/angular-test-app/src/preview-examples/grid.ts index 8d4185cd4b8..c005c69ca5d 100644 --- a/packages/angular-test-app/src/preview-examples/grid.ts +++ b/packages/angular-test-app/src/preview-examples/grid.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './grid.html', - styleUrls: ['./styles/grid.css'], + styleUrls: ['./grid.css'], }) export default class Grid {} diff --git a/packages/example-styles/css/icon-toggle-buttons.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css similarity index 63% rename from packages/example-styles/css/icon-toggle-buttons.css rename to packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css index 1f208a2bd24..8f18e1e1252 100644 --- a/packages/example-styles/css/icon-toggle-buttons.css +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts index e40a2a1daad..79d156b75e8 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts @@ -37,6 +37,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-primary-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.css new file mode 100644 index 00000000000..8f18e1e1252 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts index 2c41a24ffc2..610b2caecef 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts @@ -37,6 +37,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-primary-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css new file mode 100644 index 00000000000..8f18e1e1252 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts index c19695cf69c..34eeb714609 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts @@ -30,6 +30,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-secondary-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css new file mode 100644 index 00000000000..8f18e1e1252 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.ts index 9e561a75564..bbc2abc7d8a 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.ts @@ -80,6 +80,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-secondary-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.css new file mode 100644 index 00000000000..8f18e1e1252 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.ts index 759f812d4ae..c8ab41ab695 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.ts @@ -21,6 +21,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-secondary.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/kpi.css b/packages/angular-test-app/src/preview-examples/kpi.css similarity index 61% rename from packages/example-styles/css/kpi.css rename to packages/angular-test-app/src/preview-examples/kpi.css index c00e244036c..9e007c2ee37 100644 --- a/packages/example-styles/css/kpi.css +++ b/packages/angular-test-app/src/preview-examples/kpi.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .kpi { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/kpi.ts b/packages/angular-test-app/src/preview-examples/kpi.ts index a94a0a6a76d..b84fe9aa4cd 100644 --- a/packages/angular-test-app/src/preview-examples/kpi.ts +++ b/packages/angular-test-app/src/preview-examples/kpi.ts @@ -32,6 +32,6 @@ import { Component } from '@angular/core'; > `, - styleUrls: ['./styles/kpi.css'], + styleUrls: ['./kpi.css'], }) export default class Kpi {} diff --git a/packages/example-styles/css/menu-category.css b/packages/angular-test-app/src/preview-examples/menu-category.css similarity index 51% rename from packages/example-styles/css/menu-category.css rename to packages/angular-test-app/src/preview-examples/menu-category.css index 678a7b8559a..a726a2876a5 100644 --- a/packages/example-styles/css/menu-category.css +++ b/packages/angular-test-app/src/preview-examples/menu-category.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-application { width: 100vw; diff --git a/packages/angular-test-app/src/preview-examples/menu-category.ts b/packages/angular-test-app/src/preview-examples/menu-category.ts index 5a10c85c303..3a6c1584a46 100644 --- a/packages/angular-test-app/src/preview-examples/menu-category.ts +++ b/packages/angular-test-app/src/preview-examples/menu-category.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './menu-category.html', - styleUrls: ['./styles/menu-category.css'], + styleUrls: ['./menu-category.css'], }) export default class MenuCategory {} diff --git a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts index 13b76f97216..94c30d43584 100644 --- a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts +++ b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Bottom tab `, - styleUrls: ['./styles/menu.css'], + styleUrls: ['./menu-with-bottom-tabs.css'], }) export default class VerticalTabs {} diff --git a/packages/example-styles/css/message-bar.css b/packages/angular-test-app/src/preview-examples/message-bar.css similarity index 50% rename from packages/example-styles/css/message-bar.css rename to packages/angular-test-app/src/preview-examples/message-bar.css index dafa0c56a8b..1b9e6501b51 100644 --- a/packages/example-styles/css/message-bar.css +++ b/packages/angular-test-app/src/preview-examples/message-bar.css @@ -1,17 +1,21 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .message-bar { - margin: 0.5rem + margin: 0.5rem; } .message-bar > ix-message-bar { margin-bottom: 0.5rem; - display: block + display: block; } diff --git a/packages/angular-test-app/src/preview-examples/message-bar.ts b/packages/angular-test-app/src/preview-examples/message-bar.ts index ed66e8d18d3..159b66d380a 100644 --- a/packages/angular-test-app/src/preview-examples/message-bar.ts +++ b/packages/angular-test-app/src/preview-examples/message-bar.ts @@ -23,6 +23,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/message-bar.css'], + styleUrls: ['./message-bar.css'], }) export default class MessageBar {} diff --git a/packages/example-styles/css/modal-sizes.css b/packages/angular-test-app/src/preview-examples/modal-sizes.css similarity index 68% rename from packages/example-styles/css/modal-sizes.css rename to packages/angular-test-app/src/preview-examples/modal-sizes.css index 64d4e313f5d..c1370c08e38 100644 --- a/packages/example-styles/css/modal-sizes.css +++ b/packages/angular-test-app/src/preview-examples/modal-sizes.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .modal-sizes { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/modal-sizes.ts b/packages/angular-test-app/src/preview-examples/modal-sizes.ts index 57f5d58a24b..9922171290c 100644 --- a/packages/angular-test-app/src/preview-examples/modal-sizes.ts +++ b/packages/angular-test-app/src/preview-examples/modal-sizes.ts @@ -12,7 +12,7 @@ import { IxModalSize, ModalService } from '@siemens/ix-angular'; @Component({ selector: 'app-example', - styleUrls: ['./styles/modal-sizes.css'], + styleUrls: ['./modal-sizes.css'], templateUrl: './modal-sizes.html', }) export default class ModalSizes { diff --git a/packages/example-styles/css/pill-variants.css b/packages/angular-test-app/src/preview-examples/pill-variants.css similarity index 59% rename from packages/example-styles/css/pill-variants.css rename to packages/angular-test-app/src/preview-examples/pill-variants.css index 8656d8658ed..7c5fc4e29a7 100644 --- a/packages/example-styles/css/pill-variants.css +++ b/packages/angular-test-app/src/preview-examples/pill-variants.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-pill { min-width: 7rem; diff --git a/packages/angular-test-app/src/preview-examples/pill-variants.ts b/packages/angular-test-app/src/preview-examples/pill-variants.ts index 664829e4795..8c3c5b6f0ef 100644 --- a/packages/angular-test-app/src/preview-examples/pill-variants.ts +++ b/packages/angular-test-app/src/preview-examples/pill-variants.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - styleUrls: ['./styles/pill-variants.css'], + styleUrls: ['./pill-variants.css'], template: ` diff --git a/packages/example-styles/css/pill.css b/packages/angular-test-app/src/preview-examples/pill.css similarity index 63% rename from packages/example-styles/css/pill.css rename to packages/angular-test-app/src/preview-examples/pill.css index 1725902e151..18ebad9bfb6 100644 --- a/packages/example-styles/css/pill.css +++ b/packages/angular-test-app/src/preview-examples/pill.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-pill { margin: 0 0.5rem 0.5rem 0; diff --git a/packages/angular-test-app/src/preview-examples/pill.ts b/packages/angular-test-app/src/preview-examples/pill.ts index c0395308cf7..27c3845df65 100644 --- a/packages/angular-test-app/src/preview-examples/pill.ts +++ b/packages/angular-test-app/src/preview-examples/pill.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - styleUrls: ['./styles/pill.css'], + styleUrls: ['./pill.css'], template: ` Label diff --git a/packages/angular-test-app/src/preview-examples/popover-news.css b/packages/angular-test-app/src/preview-examples/popover-news.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/popover-news.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/angular-test-app/src/preview-examples/popover-news.ts b/packages/angular-test-app/src/preview-examples/popover-news.ts index e693c8b82f8..818ed9c0ddf 100644 --- a/packages/angular-test-app/src/preview-examples/popover-news.ts +++ b/packages/angular-test-app/src/preview-examples/popover-news.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './popover-news.html', - styleUrls: ['./styles/application.css'], + styleUrls: ['./popover-news.css'], }) export default class PopoverNews {} diff --git a/packages/example-styles/css/radio-button.css b/packages/angular-test-app/src/preview-examples/radio-button.css similarity index 66% rename from packages/example-styles/css/radio-button.css rename to packages/angular-test-app/src/preview-examples/radio-button.css index ae440bf9aa2..d6b248c047a 100644 --- a/packages/example-styles/css/radio-button.css +++ b/packages/angular-test-app/src/preview-examples/radio-button.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .radio-button { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/radio-button.ts b/packages/angular-test-app/src/preview-examples/radio-button.ts index bf1c961bcd4..53a7c9f50a7 100644 --- a/packages/angular-test-app/src/preview-examples/radio-button.ts +++ b/packages/angular-test-app/src/preview-examples/radio-button.ts @@ -23,6 +23,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/radio-button.css'], + styleUrls: ['./radio-button.css'], }) export default class Radiobutton {} diff --git a/packages/angular-test-app/src/preview-examples/settings.css b/packages/angular-test-app/src/preview-examples/settings.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/settings.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/angular-test-app/src/preview-examples/settings.ts b/packages/angular-test-app/src/preview-examples/settings.ts index 9ae41d6643e..0f157c0b63e 100644 --- a/packages/angular-test-app/src/preview-examples/settings.ts +++ b/packages/angular-test-app/src/preview-examples/settings.ts @@ -12,7 +12,7 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './settings.html', - styleUrls: ['./styles/application.css'], + styleUrls: ['./settings.css'], }) export default class Settings implements AfterViewInit { @ViewChild('menu', { read: ElementRef }) diff --git a/packages/example-styles/css/tabs.css b/packages/angular-test-app/src/preview-examples/tabs.css similarity index 62% rename from packages/example-styles/css/tabs.css rename to packages/angular-test-app/src/preview-examples/tabs.css index 38297316e67..e1240426efa 100644 --- a/packages/example-styles/css/tabs.css +++ b/packages/angular-test-app/src/preview-examples/tabs.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .tabs { display: block; diff --git a/packages/angular-test-app/src/preview-examples/tabs.ts b/packages/angular-test-app/src/preview-examples/tabs.ts index 337ef7cb6fa..a5b3401e344 100644 --- a/packages/angular-test-app/src/preview-examples/tabs.ts +++ b/packages/angular-test-app/src/preview-examples/tabs.ts @@ -23,7 +23,7 @@ import { Component } from '@angular/core';
Content Tab 3
`, - styleUrls: ['./styles/tabs.css'], + styleUrls: ['./tabs.css'], }) export default class Tabs { selectedTab = 1; diff --git a/packages/example-styles/css/theme-switcher.css b/packages/angular-test-app/src/preview-examples/theme-switcher.css similarity index 55% rename from packages/example-styles/css/theme-switcher.css rename to packages/angular-test-app/src/preview-examples/theme-switcher.css index dae33ecf066..e6b324e508c 100644 --- a/packages/example-styles/css/theme-switcher.css +++ b/packages/angular-test-app/src/preview-examples/theme-switcher.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ .theme-switcher ix-col { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/theme-switcher.ts b/packages/angular-test-app/src/preview-examples/theme-switcher.ts index 2612d21c547..56d0290c0f6 100644 --- a/packages/angular-test-app/src/preview-examples/theme-switcher.ts +++ b/packages/angular-test-app/src/preview-examples/theme-switcher.ts @@ -13,7 +13,7 @@ import { themeSwitcher } from '@siemens/ix'; @Component({ selector: 'app-example', templateUrl: './theme-switcher.html', - styleUrls: ['./styles/theme-switcher.css'], + styleUrls: ['./theme-switcher.css'], }) export default class ThemeSwitcher { themes = ['theme-classic-light', 'theme-classic-dark']; diff --git a/packages/angular-test-app/src/preview-examples/tile.css b/packages/angular-test-app/src/preview-examples/tile.css new file mode 100644 index 00000000000..654fa064356 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/tile.css @@ -0,0 +1,16 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-tile { + margin-bottom: 0.5rem; +} diff --git a/packages/angular-test-app/src/preview-examples/tile.ts b/packages/angular-test-app/src/preview-examples/tile.ts index 21b370ecb4b..652cc0bd53b 100644 --- a/packages/angular-test-app/src/preview-examples/tile.ts +++ b/packages/angular-test-app/src/preview-examples/tile.ts @@ -49,6 +49,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/tile.css'], + styleUrls: ['./tile.css'], }) export default class Tile {} diff --git a/packages/example-styles/css/toggle-buttons.css b/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.css similarity index 62% rename from packages/example-styles/css/toggle-buttons.css rename to packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.css index 1211b14e43f..e3c3e245acd 100644 --- a/packages/example-styles/css/toggle-buttons.css +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.ts b/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.ts index a7e9b68ac3e..9442796f3cf 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.ts @@ -23,6 +23,6 @@ import { Component } from '@angular/core'; Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-primary-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.css b/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.css new file mode 100644 index 00000000000..e3c3e245acd --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.ts b/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.ts index 457d705ccf9..2daee6a1a01 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.ts @@ -23,6 +23,6 @@ import { Component } from '@angular/core'; Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-primary-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary.css b/packages/angular-test-app/src/preview-examples/toggle-button-primary.css new file mode 100644 index 00000000000..e3c3e245acd --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts b/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts index a6945a35a55..d88a039d630 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts @@ -19,6 +19,6 @@ import { Component } from '@angular/core'; Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-primary.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.css b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.css new file mode 100644 index 00000000000..e3c3e245acd --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.ts b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.ts index b821cff4ec8..8507156d0ed 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Disabled Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-secondary-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.css b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.css new file mode 100644 index 00000000000..e3c3e245acd --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.ts b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.ts index 279ff605244..6a80a84dcf9 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Disabled Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-secondary-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary.css b/packages/angular-test-app/src/preview-examples/toggle-button-secondary.css new file mode 100644 index 00000000000..e3c3e245acd --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary.ts b/packages/angular-test-app/src/preview-examples/toggle-button-secondary.ts index 3c738c916fb..269d6175bee 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-secondary.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Disabled Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-secondary.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/tooltip.css b/packages/angular-test-app/src/preview-examples/tooltip.css similarity index 59% rename from packages/example-styles/css/tooltip.css rename to packages/angular-test-app/src/preview-examples/tooltip.css index 725562be027..c65e0d165a5 100644 --- a/packages/example-styles/css/tooltip.css +++ b/packages/angular-test-app/src/preview-examples/tooltip.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-button { margin: 4rem; diff --git a/packages/angular-test-app/src/preview-examples/tooltip.ts b/packages/angular-test-app/src/preview-examples/tooltip.ts index 03c9b11a391..e551028ce7e 100644 --- a/packages/angular-test-app/src/preview-examples/tooltip.ts +++ b/packages/angular-test-app/src/preview-examples/tooltip.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './tooltip.html', - styleUrls: ['./styles/tooltip.css'], + styleUrls: ['./tooltip.css'], }) export default class Tooltip {} diff --git a/packages/example-styles/css/menu.css b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.css similarity index 61% rename from packages/example-styles/css/menu.css rename to packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.css index 81bab949946..73d90ff5515 100644 --- a/packages/example-styles/css/menu.css +++ b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.css @@ -6,6 +6,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ ix-menu { width: 100vw; diff --git a/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts index 81bd6822e6a..9f379b9df3b 100644 --- a/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts +++ b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts @@ -32,6 +32,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/menu.css'], + styleUrls: ['./vertical-tabs-with-avatar.css'], }) export default class VerticalTabsWithAvatar {} diff --git a/packages/angular-test-app/src/preview-examples/vertical-tabs.css b/packages/angular-test-app/src/preview-examples/vertical-tabs.css new file mode 100644 index 00000000000..73d90ff5515 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/vertical-tabs.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-menu { + width: 100vw; + height: 100vh; +} diff --git a/packages/angular-test-app/src/preview-examples/vertical-tabs.ts b/packages/angular-test-app/src/preview-examples/vertical-tabs.ts index 4035b52ab7e..28c437f583b 100644 --- a/packages/angular-test-app/src/preview-examples/vertical-tabs.ts +++ b/packages/angular-test-app/src/preview-examples/vertical-tabs.ts @@ -22,6 +22,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/menu.css'], + styleUrls: ['./vertical-tabs.css'], }) export default class VerticalTabs {} diff --git a/packages/angular-test-app/src/preview-examples/workflow.css b/packages/angular-test-app/src/preview-examples/workflow.css new file mode 100644 index 00000000000..de098826230 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/workflow.css @@ -0,0 +1,16 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + overflow-x: scroll; +} diff --git a/packages/angular-test-app/src/preview-examples/workflow.ts b/packages/angular-test-app/src/preview-examples/workflow.ts index 1b77149a155..6e7c315a328 100644 --- a/packages/angular-test-app/src/preview-examples/workflow.ts +++ b/packages/angular-test-app/src/preview-examples/workflow.ts @@ -21,6 +21,6 @@ import { Component } from '@angular/core'; Step 6 `, - styleUrls: ['./styles/workflow.css'], + styleUrls: ['./workflow.css'], }) export default class Workflow {} diff --git a/packages/angular-test-app/src/styles.scss b/packages/angular-test-app/src/styles.scss index ac638cda636..5fe49b33e0f 100644 --- a/packages/angular-test-app/src/styles.scss +++ b/packages/angular-test-app/src/styles.scss @@ -7,4 +7,4 @@ * LICENSE file in the root directory of this source tree. */ -@import './preview-examples/styles/global.css'; +@import './preview-examples/global.css'; diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 8e05fb87e42..642fc01acb1 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -52,6 +52,7 @@ "@docusaurus/types": "3.3.0", "@types/fs-extra": "^9.0.13", "@types/rimraf": "^3.0.2", + "@types/node": "^20.16.0", "@types/tar": "^6.1.7", "axios": "^1.5.1", "figma-plugin": "workspace:*", diff --git a/packages/documentation/scripts/generate-markdown.ts b/packages/documentation/scripts/generate-markdown.ts index 0f86f5b27bb..d3ac8552dee 100644 --- a/packages/documentation/scripts/generate-markdown.ts +++ b/packages/documentation/scripts/generate-markdown.ts @@ -55,8 +55,6 @@ const vueTestAppPath = path.join( 'preview-examples' ); -const exampleStylesPath = path.join(examplePath, 'example-styles', 'src'); - const docsPath = path.join(rootPath, 'docs', 'auto-generated'); const iframeExampleCodePath = path.join(staticPath, 'webcomponent-examples'); @@ -175,7 +173,6 @@ const tasks = new Listr( fs.copy(angularTestAppPath, docsStaticAngularExamples), fs.copy(reactTestAppPath, docsStaticReactExamples), fs.copy(vueTestAppPath, docsStaticVueExamples), - fs.copy(exampleStylesPath, docsStaticStyleExamples), ]; return Promise.all(copy); diff --git a/packages/documentation/src/components/PlaygroundV3/angular-snippets.ts b/packages/documentation/src/components/PlaygroundV3/angular-snippets.ts index 1183c63ab44..c8246ca8239 100644 --- a/packages/documentation/src/components/PlaygroundV3/angular-snippets.ts +++ b/packages/documentation/src/components/PlaygroundV3/angular-snippets.ts @@ -21,29 +21,17 @@ async function fetchFile( if (file) { snippets[fileName] = file; } - - return file; - } catch (e) { - return ''; - } + } catch (e) {} } export async function fetchSourceForAngular(baseUrl: string, name: string) { const snippets: Record = {}; - await fetchFile(snippets, `${baseUrl}/${name}.html`, `${name}.html`); - - const tsFile = await fetchFile( - snippets, - `${baseUrl}/${name}.ts`, - `${name}.ts` - ); - - const regex = /styleUrls:\s*\[\s*['"]([^'"]+)['"]\s*\]/; - const match = tsFile.match(regex); - if (match) { - await fetchFile(snippets, `${baseUrl}/${match[1]}`, `${match[1]}`); - } + await Promise.all([ + fetchFile(snippets, `${baseUrl}/${name}.html`, `${name}.html`), + fetchFile(snippets, `${baseUrl}/${name}.ts`, `${name}.ts`), + fetchFile(snippets, `${baseUrl}/${name}.css`, `${name}.css`), + ]); return snippets; } diff --git a/packages/documentation/src/components/PlaygroundV3/html-snippets.ts b/packages/documentation/src/components/PlaygroundV3/html-snippets.ts index a514bfd7ed5..527b8bac5a9 100644 --- a/packages/documentation/src/components/PlaygroundV3/html-snippets.ts +++ b/packages/documentation/src/components/PlaygroundV3/html-snippets.ts @@ -16,17 +16,13 @@ export async function fetchSourceForHtml(baseUrl: string, name: string) { snippets[`${name}.html`] = htmlFile; - const regex = - //; - const match = htmlFile.match(regex); - - if (match) { - const styleFile = await docusaurusFetch(`${baseUrl}/styles/${match[1]}`); + try { + const styleFile = await docusaurusFetch(`${baseUrl}/${name}.css`); if (styleFile) { - snippets[`./styles/${match[1]}`] = styleFile; + snippets[`./${name}.css`] = styleFile; } - } + } catch (e) {} return snippets; } diff --git a/packages/documentation/src/components/PlaygroundV3/react-snippets.ts b/packages/documentation/src/components/PlaygroundV3/react-snippets.ts index 53ec7fcf5db..1831872fabe 100644 --- a/packages/documentation/src/components/PlaygroundV3/react-snippets.ts +++ b/packages/documentation/src/components/PlaygroundV3/react-snippets.ts @@ -16,16 +16,12 @@ export async function fetchSourceForReact(baseUrl: string, name: string) { snippets[`${name}.tsx`] = tsFile; - const regex = /import\s*\s*['"]\.\/styles\/([^'"]+)['"]\s*/; - const match = tsFile.match(regex); - - if (match) { - const styleFile = await docusaurusFetch(`${baseUrl}/styles/${match[1]}`); - + try { + const styleFile = await docusaurusFetch(`${baseUrl}/${name}.css`); if (styleFile) { - snippets[`./styles/${match[1]}`] = styleFile; + snippets[`./${name}.css`] = styleFile; } - } + } catch (e) {} return snippets; } diff --git a/packages/documentation/src/components/PlaygroundV3/vue-snippets.ts b/packages/documentation/src/components/PlaygroundV3/vue-snippets.ts index d452a3bbf2e..004e6b4ae66 100644 --- a/packages/documentation/src/components/PlaygroundV3/vue-snippets.ts +++ b/packages/documentation/src/components/PlaygroundV3/vue-snippets.ts @@ -16,17 +16,12 @@ export async function fetchSourceForVue(baseUrl: string, name: string) { snippets[`${name}.vue`] = tsFile; - const regex = - /<\/style>/; - const match = tsFile.match(regex); - - if (match) { - const styleFile = await docusaurusFetch(`${baseUrl}/styles/${match[1]}`); - + try { + const styleFile = await docusaurusFetch(`${baseUrl}/${name}.css`); if (styleFile) { - snippets[`./styles/${match[1]}`] = styleFile; + snippets[`./${name}.css`] = styleFile; } - } + } catch (e) {} return snippets; } diff --git a/packages/documentation/src/utils/code-runtime/index.ts b/packages/documentation/src/utils/code-runtime/index.ts index f216db63715..60077b3a39d 100644 --- a/packages/documentation/src/utils/code-runtime/index.ts +++ b/packages/documentation/src/utils/code-runtime/index.ts @@ -57,7 +57,7 @@ export async function getReactRuntime(baseUrl: string) { await Promise.all(runtime$); const globalCss = await docusaurusFetch( - `${baseUrl}auto-generated/previews/react/styles/global.css` + `${baseUrl}auto-generated/previews/react/global.css` ); runtime['src/styles/global.css'] = globalCss; return runtime; @@ -110,7 +110,7 @@ export async function getHTMLRuntime(baseUrl: string) { delete runtime['src/main.js']; const globalCss = await docusaurusFetch( - `${baseUrl}auto-generated/previews/web-components/styles/global.css` + `${baseUrl}auto-generated/previews/web-components/global.css` ); runtime['src/styles/global.css'] = globalCss; return runtime; diff --git a/packages/documentation/tsconfig.json b/packages/documentation/tsconfig.json index d160022b5ed..314eab8a418 100644 --- a/packages/documentation/tsconfig.json +++ b/packages/documentation/tsconfig.json @@ -2,10 +2,6 @@ // This file is not used in compilation. It is here just for a nice editor experience. "extends": "@docusaurus/tsconfig", "compilerOptions": { - "baseUrl": ".", - "module": "NodeNext", - "moduleResolution": "Node16", - "resolveJsonModule": true - }, - "include": ["**/**/*.tsx"] + "baseUrl": "." + } } diff --git a/packages/example-styles/build.mjs b/packages/example-styles/build.mjs deleted file mode 100644 index 91ab3c53405..00000000000 --- a/packages/example-styles/build.mjs +++ /dev/null @@ -1,16 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 Siemens AG - * - * SPDX-License-Identifier: MIT - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import fs from 'fs-extra'; -import path from 'path'; - -const __dirname = path.resolve(); - -console.log('Building...'); -fs.copySync(path.join(__dirname, 'css'), path.join(__dirname, 'dist', 'css')); -console.log('Finished copy css to dist'); diff --git a/packages/example-styles/css/charts-empty-state.css b/packages/example-styles/css/charts-empty-state.css deleted file mode 100644 index 0158c9d4101..00000000000 --- a/packages/example-styles/css/charts-empty-state.css +++ /dev/null @@ -1,16 +0,0 @@ -.echarts { - position: relative; - width: 100%; - height: 40rem; - padding-top: 1rem; -} - -.empty-state-container { - position: absolute; - justify-content: center; - align-content: center; - width: 100%; - height: 100%; - background-color: var(--theme-color-backdrop); - z-index: 1; -} diff --git a/packages/example-styles/css/charts-gauge.css b/packages/example-styles/css/charts-gauge.css deleted file mode 100644 index 90dd7d168e2..00000000000 --- a/packages/example-styles/css/charts-gauge.css +++ /dev/null @@ -1,6 +0,0 @@ -.echarts-gauge { - position: relative; - width: 100%; - height: 20rem; - padding-top: 3rem; -} diff --git a/packages/example-styles/css/charts.css b/packages/example-styles/css/charts.css deleted file mode 100644 index 349426eb993..00000000000 --- a/packages/example-styles/css/charts.css +++ /dev/null @@ -1,6 +0,0 @@ -.echarts { - position: relative; - width: 100%; - height: 40rem; - padding-top: 1rem; -} diff --git a/packages/example-styles/css/tile.css b/packages/example-styles/css/tile.css deleted file mode 100644 index 5d3a6cad05b..00000000000 --- a/packages/example-styles/css/tile.css +++ /dev/null @@ -1,12 +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. - */ - -ix-tile { - margin-bottom: 0.5rem; -} diff --git a/packages/example-styles/css/workflow.css b/packages/example-styles/css/workflow.css deleted file mode 100644 index 0fa4c63666d..00000000000 --- a/packages/example-styles/css/workflow.css +++ /dev/null @@ -1,12 +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. - */ - -body { - overflow-x: scroll; -} diff --git a/packages/example-styles/package.json b/packages/example-styles/package.json deleted file mode 100644 index 0e98706664a..00000000000 --- a/packages/example-styles/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "example-styles", - "version": "1.0.0", - "private": true, - "license": "MIT", - "type": "module", - "main": "dist/index.js", - "scripts": { - "build": "tsc && node build.mjs" - }, - "devDependencies": { - "@types/fs-extra": "^9.0.13", - "fs-extra": "^11.2.0", - "rimraf": "^6.0.1", - "typescript": "^5.2.2" - } -} diff --git a/packages/example-styles/src/index.ts b/packages/example-styles/src/index.ts deleted file mode 100644 index bb52f35ed8b..00000000000 --- a/packages/example-styles/src/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 Siemens AG - * - * SPDX-License-Identifier: MIT - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import { fileURLToPath } from 'url'; -import fs from 'fs-extra'; -import path from 'path'; -import { rimrafSync } from 'rimraf'; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); -const __packageRoot = path.resolve(__dirname, '..'); - -export function copyPreviewStyles(dest: string, rimraf = true) { - if (rimraf) { - rimrafSync(dest); - } - fs.copySync(path.join(__packageRoot, 'dist', 'css'), dest); -} diff --git a/packages/example-styles/tsconfig.json b/packages/example-styles/tsconfig.json deleted file mode 100644 index eeead9197c9..00000000000 --- a/packages/example-styles/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "declaration": true, - "module": "Node16", - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "target": "es6", - "noImplicitAny": true, - "moduleResolution": "Node16", - "sourceMap": true, - "outDir": "dist", - "baseUrl": ".", - "skipLibCheck": true, - "lib": ["DOM", "ES2022"] - }, - "include": ["src/**/*.ts"], - "exclude": ["node_modules", "src/**/*.test.ts"] -} diff --git a/packages/html-test-app/.gitignore b/packages/html-test-app/.gitignore deleted file mode 100644 index 095db26033b..00000000000 --- a/packages/html-test-app/.gitignore +++ /dev/null @@ -1 +0,0 @@ -src/preview-examples/styles diff --git a/packages/html-test-app/package.json b/packages/html-test-app/package.json index 13d98858c41..b7b730fde99 100644 --- a/packages/html-test-app/package.json +++ b/packages/html-test-app/package.json @@ -17,7 +17,6 @@ "@siemens/ix-aggrid": "workspace:*", "@siemens/ix-echarts": "workspace:*", "@siemens/ix-icons": "^2.0.0", - "example-styles": "workspace:*", "vite": "^3.1.0" }, "dependencies": { diff --git a/packages/html-test-app/src/main.js b/packages/html-test-app/src/main.js index c9332d8b2f6..9caeb820824 100644 --- a/packages/html-test-app/src/main.js +++ b/packages/html-test-app/src/main.js @@ -8,7 +8,7 @@ */ import { defineCustomElements } from '@siemens/ix/loader'; -import './preview-examples/styles/global.css'; +import './preview-examples/global.css'; (async () => { defineCustomElements(); diff --git a/packages/html-test-app/src/preview-examples/about-and-legal.css b/packages/html-test-app/src/preview-examples/about-and-legal.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/about-and-legal.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/html-test-app/src/preview-examples/about-and-legal.html b/packages/html-test-app/src/preview-examples/about-and-legal.html index 53f748a1cb3..c1c0d5e4cbe 100644 --- a/packages/html-test-app/src/preview-examples/about-and-legal.html +++ b/packages/html-test-app/src/preview-examples/about-and-legal.html @@ -13,7 +13,7 @@ About and legal example - + diff --git a/packages/html-test-app/src/preview-examples/application-app-switch.css b/packages/html-test-app/src/preview-examples/application-app-switch.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/application-app-switch.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/html-test-app/src/preview-examples/application-app-switch.html b/packages/html-test-app/src/preview-examples/application-app-switch.html index e9f80e1d00a..414acca78ca 100644 --- a/packages/html-test-app/src/preview-examples/application-app-switch.html +++ b/packages/html-test-app/src/preview-examples/application-app-switch.html @@ -13,7 +13,7 @@ Application app switch example - + diff --git a/packages/html-test-app/src/preview-examples/application-breakpoints.css b/packages/html-test-app/src/preview-examples/application-breakpoints.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/application-breakpoints.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/html-test-app/src/preview-examples/application-breakpoints.html b/packages/html-test-app/src/preview-examples/application-breakpoints.html index fe6d7d2ba81..ecb2f152d02 100644 --- a/packages/html-test-app/src/preview-examples/application-breakpoints.html +++ b/packages/html-test-app/src/preview-examples/application-breakpoints.html @@ -13,7 +13,7 @@ Application breakpoint example - + diff --git a/packages/html-test-app/src/preview-examples/application.css b/packages/html-test-app/src/preview-examples/application.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/application.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/html-test-app/src/preview-examples/application.html b/packages/html-test-app/src/preview-examples/application.html index 597c94314aa..683b3e10f76 100644 --- a/packages/html-test-app/src/preview-examples/application.html +++ b/packages/html-test-app/src/preview-examples/application.html @@ -13,7 +13,7 @@ Application example - + diff --git a/packages/html-test-app/src/preview-examples/basic-navigation.css b/packages/html-test-app/src/preview-examples/basic-navigation.css new file mode 100644 index 00000000000..1c40937575d --- /dev/null +++ b/packages/html-test-app/src/preview-examples/basic-navigation.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-basic-navigation { + width: 100vw; + height: 100vh; +} diff --git a/packages/html-test-app/src/preview-examples/basic-navigation.html b/packages/html-test-app/src/preview-examples/basic-navigation.html index 604ae5cbbdb..3783d5d95cf 100644 --- a/packages/html-test-app/src/preview-examples/basic-navigation.html +++ b/packages/html-test-app/src/preview-examples/basic-navigation.html @@ -13,7 +13,7 @@ Basic navigation example - + diff --git a/packages/html-test-app/src/preview-examples/blind-header-actions.css b/packages/html-test-app/src/preview-examples/blind-header-actions.css new file mode 100644 index 00000000000..84fea6a2fee --- /dev/null +++ b/packages/html-test-app/src/preview-examples/blind-header-actions.css @@ -0,0 +1,16 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-blind { + margin: 0.5rem 0; +} diff --git a/packages/html-test-app/src/preview-examples/blind-header-actions.html b/packages/html-test-app/src/preview-examples/blind-header-actions.html index 3c8432c44c4..26045800f83 100644 --- a/packages/html-test-app/src/preview-examples/blind-header-actions.html +++ b/packages/html-test-app/src/preview-examples/blind-header-actions.html @@ -13,7 +13,7 @@ Blind header actions example - + diff --git a/packages/html-test-app/src/preview-examples/blind-variants.css b/packages/html-test-app/src/preview-examples/blind-variants.css new file mode 100644 index 00000000000..84fea6a2fee --- /dev/null +++ b/packages/html-test-app/src/preview-examples/blind-variants.css @@ -0,0 +1,16 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-blind { + margin: 0.5rem 0; +} diff --git a/packages/html-test-app/src/preview-examples/blind-variants.html b/packages/html-test-app/src/preview-examples/blind-variants.html index e164dc4cf02..ff5cca510bf 100644 --- a/packages/html-test-app/src/preview-examples/blind-variants.html +++ b/packages/html-test-app/src/preview-examples/blind-variants.html @@ -13,7 +13,7 @@ Blind variants example - + diff --git a/packages/html-test-app/src/preview-examples/blind.css b/packages/html-test-app/src/preview-examples/blind.css new file mode 100644 index 00000000000..84fea6a2fee --- /dev/null +++ b/packages/html-test-app/src/preview-examples/blind.css @@ -0,0 +1,16 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-blind { + margin: 0.5rem 0; +} diff --git a/packages/html-test-app/src/preview-examples/blind.html b/packages/html-test-app/src/preview-examples/blind.html index 09a1b6524e3..bde6b77efc3 100644 --- a/packages/html-test-app/src/preview-examples/blind.html +++ b/packages/html-test-app/src/preview-examples/blind.html @@ -13,7 +13,7 @@ Blind example - + diff --git a/packages/html-test-app/src/preview-examples/button-danger-ghost.css b/packages/html-test-app/src/preview-examples/button-danger-ghost.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/button-danger-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/button-danger-ghost.html b/packages/html-test-app/src/preview-examples/button-danger-ghost.html index 1635c4e3f1c..d9cc44ce61d 100644 --- a/packages/html-test-app/src/preview-examples/button-danger-ghost.html +++ b/packages/html-test-app/src/preview-examples/button-danger-ghost.html @@ -4,7 +4,7 @@ Vite App - + Button diff --git a/packages/html-test-app/src/preview-examples/button-danger-outline.css b/packages/html-test-app/src/preview-examples/button-danger-outline.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/button-danger-outline.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/button-danger-outline.html b/packages/html-test-app/src/preview-examples/button-danger-outline.html index eb14a87d4a5..033cc035871 100644 --- a/packages/html-test-app/src/preview-examples/button-danger-outline.html +++ b/packages/html-test-app/src/preview-examples/button-danger-outline.html @@ -4,7 +4,7 @@ Vite App - + Button diff --git a/packages/html-test-app/src/preview-examples/button-danger.css b/packages/html-test-app/src/preview-examples/button-danger.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/button-danger.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/button-danger.html b/packages/html-test-app/src/preview-examples/button-danger.html index 12d860ee5c7..033fe08b6ed 100644 --- a/packages/html-test-app/src/preview-examples/button-danger.html +++ b/packages/html-test-app/src/preview-examples/button-danger.html @@ -12,7 +12,7 @@ Vite App - + Button diff --git a/packages/html-test-app/src/preview-examples/button-ghost.css b/packages/html-test-app/src/preview-examples/button-ghost.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/button-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/button-ghost.html b/packages/html-test-app/src/preview-examples/button-ghost.html index 63e3eaf8409..e232c53996a 100644 --- a/packages/html-test-app/src/preview-examples/button-ghost.html +++ b/packages/html-test-app/src/preview-examples/button-ghost.html @@ -13,7 +13,7 @@ Button ghost example - + Button diff --git a/packages/html-test-app/src/preview-examples/button-grey-ghost.css b/packages/html-test-app/src/preview-examples/button-grey-ghost.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/button-grey-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/button-grey-ghost.html b/packages/html-test-app/src/preview-examples/button-grey-ghost.html index 33b51514a3b..7c55905987e 100644 --- a/packages/html-test-app/src/preview-examples/button-grey-ghost.html +++ b/packages/html-test-app/src/preview-examples/button-grey-ghost.html @@ -13,7 +13,7 @@ Button grey ghost example - + Button diff --git a/packages/html-test-app/src/preview-examples/button-grey-secondary.css b/packages/html-test-app/src/preview-examples/button-grey-secondary.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/button-grey-secondary.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/button-grey-secondary.html b/packages/html-test-app/src/preview-examples/button-grey-secondary.html index 2f130e31ca0..bba4d196e7b 100644 --- a/packages/html-test-app/src/preview-examples/button-grey-secondary.html +++ b/packages/html-test-app/src/preview-examples/button-grey-secondary.html @@ -13,7 +13,7 @@ Button-grey-secondary example - + Button diff --git a/packages/html-test-app/src/preview-examples/button-grey.css b/packages/html-test-app/src/preview-examples/button-grey.css new file mode 100644 index 00000000000..38340199f99 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/button-grey.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/button-grey.html b/packages/html-test-app/src/preview-examples/button-grey.html index 60b971c612a..bc11197d29d 100644 --- a/packages/html-test-app/src/preview-examples/button-grey.html +++ b/packages/html-test-app/src/preview-examples/button-grey.html @@ -13,7 +13,7 @@ Button grey example - + Button diff --git a/packages/html-test-app/src/preview-examples/button-loading.css b/packages/html-test-app/src/preview-examples/button-loading.css new file mode 100644 index 00000000000..765cd8a2967 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/button-loading.css @@ -0,0 +1,21 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-button, +ix-icon-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/button-loading.html b/packages/html-test-app/src/preview-examples/button-loading.html index 03fe97eba6b..6c057f4f4ea 100644 --- a/packages/html-test-app/src/preview-examples/button-loading.html +++ b/packages/html-test-app/src/preview-examples/button-loading.html @@ -13,7 +13,7 @@ Loading button example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-bar-simple.css b/packages/html-test-app/src/preview-examples/echarts-bar-simple.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-bar-simple.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-bar-simple.html b/packages/html-test-app/src/preview-examples/echarts-bar-simple.html index 7cdad329458..7e702975a95 100644 --- a/packages/html-test-app/src/preview-examples/echarts-bar-simple.html +++ b/packages/html-test-app/src/preview-examples/echarts-bar-simple.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-circle.css b/packages/html-test-app/src/preview-examples/echarts-circle.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-circle.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-circle.html b/packages/html-test-app/src/preview-examples/echarts-circle.html index d854e8a54b7..376175ada2e 100644 --- a/packages/html-test-app/src/preview-examples/echarts-circle.html +++ b/packages/html-test-app/src/preview-examples/echarts-circle.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-empty-state.css b/packages/html-test-app/src/preview-examples/echarts-empty-state.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-empty-state.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-empty-state.html b/packages/html-test-app/src/preview-examples/echarts-empty-state.html index 902ecf33821..e091f2ce6b6 100644 --- a/packages/html-test-app/src/preview-examples/echarts-empty-state.html +++ b/packages/html-test-app/src/preview-examples/echarts-empty-state.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-gauge.css b/packages/html-test-app/src/preview-examples/echarts-gauge.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-gauge.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-gauge.html b/packages/html-test-app/src/preview-examples/echarts-gauge.html index 7ce007d0144..ce8ab5f53b5 100644 --- a/packages/html-test-app/src/preview-examples/echarts-gauge.html +++ b/packages/html-test-app/src/preview-examples/echarts-gauge.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-line-advanced.css b/packages/html-test-app/src/preview-examples/echarts-line-advanced.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-line-advanced.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-line-advanced.html b/packages/html-test-app/src/preview-examples/echarts-line-advanced.html index 36ac526e2c0..5ca0bfbb800 100644 --- a/packages/html-test-app/src/preview-examples/echarts-line-advanced.html +++ b/packages/html-test-app/src/preview-examples/echarts-line-advanced.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.css b/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.html b/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.html index 6264d341146..ac05e95d6a5 100644 --- a/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.html +++ b/packages/html-test-app/src/preview-examples/echarts-line-multiple-y-axis.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-line-simple.css b/packages/html-test-app/src/preview-examples/echarts-line-simple.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-line-simple.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-line-simple.html b/packages/html-test-app/src/preview-examples/echarts-line-simple.html index a927ca30cbb..b50341529ff 100644 --- a/packages/html-test-app/src/preview-examples/echarts-line-simple.html +++ b/packages/html-test-app/src/preview-examples/echarts-line-simple.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-line-timeseries.html b/packages/html-test-app/src/preview-examples/echarts-line-timeseries.html deleted file mode 100644 index 16e4538cf48..00000000000 --- a/packages/html-test-app/src/preview-examples/echarts-line-timeseries.html +++ /dev/null @@ -1,126 +0,0 @@ - - - - - - - - ECharts example - - - - - - - -
- - - - - - diff --git a/packages/html-test-app/src/preview-examples/echarts-pie.css b/packages/html-test-app/src/preview-examples/echarts-pie.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-pie.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-pie.html b/packages/html-test-app/src/preview-examples/echarts-pie.html index 3cd903ae0a1..9aaaaae5613 100644 --- a/packages/html-test-app/src/preview-examples/echarts-pie.html +++ b/packages/html-test-app/src/preview-examples/echarts-pie.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-progress-arc.css b/packages/html-test-app/src/preview-examples/echarts-progress-arc.css new file mode 100644 index 00000000000..38b53e74346 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-progress-arc.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts-gauge { + position: relative; + width: 100%; + height: 20rem; + padding-top: 3rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-progress-arc.html b/packages/html-test-app/src/preview-examples/echarts-progress-arc.html index 3b180095085..d60d6141802 100644 --- a/packages/html-test-app/src/preview-examples/echarts-progress-arc.html +++ b/packages/html-test-app/src/preview-examples/echarts-progress-arc.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-progress-circle.css b/packages/html-test-app/src/preview-examples/echarts-progress-circle.css new file mode 100644 index 00000000000..38b53e74346 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-progress-circle.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts-gauge { + position: relative; + width: 100%; + height: 20rem; + padding-top: 3rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-progress-circle.html b/packages/html-test-app/src/preview-examples/echarts-progress-circle.html index b548ecbce4b..21a06b03b87 100644 --- a/packages/html-test-app/src/preview-examples/echarts-progress-circle.html +++ b/packages/html-test-app/src/preview-examples/echarts-progress-circle.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-special-3d.css b/packages/html-test-app/src/preview-examples/echarts-special-3d.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-special-3d.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-special-3d.html b/packages/html-test-app/src/preview-examples/echarts-special-3d.html index c7bc4e8dba4..b085fcfed96 100644 --- a/packages/html-test-app/src/preview-examples/echarts-special-3d.html +++ b/packages/html-test-app/src/preview-examples/echarts-special-3d.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-special-toolbox.css b/packages/html-test-app/src/preview-examples/echarts-special-toolbox.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-special-toolbox.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-special-toolbox.html b/packages/html-test-app/src/preview-examples/echarts-special-toolbox.html index 1f815244ee8..d0a3f759be1 100644 --- a/packages/html-test-app/src/preview-examples/echarts-special-toolbox.html +++ b/packages/html-test-app/src/preview-examples/echarts-special-toolbox.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts-special-zoom.css b/packages/html-test-app/src/preview-examples/echarts-special-zoom.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts-special-zoom.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts-special-zoom.html b/packages/html-test-app/src/preview-examples/echarts-special-zoom.html index 2e3151ee24b..ba7735be414 100644 --- a/packages/html-test-app/src/preview-examples/echarts-special-zoom.html +++ b/packages/html-test-app/src/preview-examples/echarts-special-zoom.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/echarts.css b/packages/html-test-app/src/preview-examples/echarts.css new file mode 100644 index 00000000000..fce218a9cae --- /dev/null +++ b/packages/html-test-app/src/preview-examples/echarts.css @@ -0,0 +1,19 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/html-test-app/src/preview-examples/echarts.html b/packages/html-test-app/src/preview-examples/echarts.html index 550efbaa899..22711b5429c 100644 --- a/packages/html-test-app/src/preview-examples/echarts.html +++ b/packages/html-test-app/src/preview-examples/echarts.html @@ -13,7 +13,7 @@ ECharts example - + diff --git a/packages/html-test-app/src/preview-examples/flip-tile.css b/packages/html-test-app/src/preview-examples/flip-tile.css new file mode 100644 index 00000000000..49d1a64ba30 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/flip-tile.css @@ -0,0 +1,26 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.flip-tile { + display: flex; + flex-direction: row; + justify-content: center; + position: relative; + margin-top: 2rem; + max-width: 100%; + flex-wrap: wrap; +} + +.flip-tile > ix-flip-tile { + margin: 0 0.5rem 0.5rem 0; +} diff --git a/packages/html-test-app/src/preview-examples/flip-tile.html b/packages/html-test-app/src/preview-examples/flip-tile.html index aea53170615..962c0a9cd4a 100644 --- a/packages/html-test-app/src/preview-examples/flip-tile.html +++ b/packages/html-test-app/src/preview-examples/flip-tile.html @@ -13,7 +13,7 @@ Flip tile example - +
diff --git a/packages/html-test-app/src/preview-examples/global.css b/packages/html-test-app/src/preview-examples/global.css new file mode 100644 index 00000000000..1a55311fdb6 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/global.css @@ -0,0 +1,43 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +@import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; + +/* global imports only needed for AG-Grid */ +@import 'ag-grid-community/styles/ag-grid.css'; +@import 'ag-grid-community/styles/ag-theme-alpine.css'; +@import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css'; + +html { + width: 100vw; + height: 100vh; + overflow: hidden; +} + +#root { + height: 100vh; + width: 100vw; +} + +/* placeholder-logo for usage in all files */ +.placeholder-logo { + float: left; + width: 8.625rem; + height: 31px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136.221' height='12' viewBox='0 0 136.221 12'%3E%3Cg id='Gruppe_4763' data-name='Gruppe 4763' transform='translate(-85 -28)'%3E%3Cg id='Polygon_3' data-name='Polygon 3' transform='translate(111 28)' fill='none'%3E%3Cpath d='M7,0l7,12H0Z' stroke='none'/%3E%3Cpath d='M 7 3.969271659851074 L 3.482074737548828 10 L 10.51792526245117 10 L 7 3.969271659851074 M 7 9.5367431640625e-07 L 14 12 L 0 12 L 7 9.5367431640625e-07 Z' stroke='none' fill='%23fff'/%3E%3C/g%3E%3Cg id='Ellipse_14' data-name='Ellipse 14' transform='translate(99 28)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='6' stroke='none'/%3E%3Ccircle cx='6' cy='6' r='5' fill='none'/%3E%3C/g%3E%3Cg id='Rechteck_1111' data-name='Rechteck 1111' transform='translate(85 28)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect width='12' height='12' stroke='none'/%3E%3Crect x='1' y='1' width='10' height='10' fill='none'/%3E%3C/g%3E%3Cpath id='Pfad_4060' data-name='Pfad 4060' d='M4.289,14.938V10.177L-.137,3.347H2.89L4.8,6.415q.376.605.859,1.513.458-.875.867-1.538l1.9-3.043h2.855L6.9,10.177v4.761Zm12.54-11.8a5.162,5.162,0,0,1,4.188,1.734,6.4,6.4,0,0,1,1.4,4.27,6.2,6.2,0,0,1-1.652,4.54,5.249,5.249,0,0,1-3.935,1.456,5.162,5.162,0,0,1-4.188-1.734,6.5,6.5,0,0,1-1.4-4.335A6.126,6.126,0,0,1,12.894,4.59,5.283,5.283,0,0,1,16.829,3.143ZM16.82,5.188a2.46,2.46,0,0,0-2.184,1.178,4.906,4.906,0,0,0-.7,2.732,4.78,4.78,0,0,0,.826,2.994,2.617,2.617,0,0,0,4.254-.18,4.922,4.922,0,0,0,.7-2.765,4.706,4.706,0,0,0-.826-2.953A2.484,2.484,0,0,0,16.82,5.188Zm7.64-1.84H27.07v6.732a4.482,4.482,0,0,0,.368,2.249,1.662,1.662,0,0,0,.728.56,2.652,2.652,0,0,0,1.063.209,2.744,2.744,0,0,0,1.194-.249,1.6,1.6,0,0,0,.753-.675,5.051,5.051,0,0,0,.286-2.094V3.347H33.99V9.768a15.378,15.378,0,0,1-.139,2.593q-.6,2.781-4.63,2.781-3.125,0-4.18-1.669a3.279,3.279,0,0,1-.466-1.28,17.763,17.763,0,0,1-.115-2.425ZM36.64,14.938V3.347h4.188a8.256,8.256,0,0,1,1.763.151,3.086,3.086,0,0,1,1.141.495,2.874,2.874,0,0,1,1.145,2.47,3.085,3.085,0,0,1-.56,1.881,2.812,2.812,0,0,1-1.6,1.039,1.748,1.748,0,0,1,.773.6,11.953,11.953,0,0,1,.863,1.689l1.464,3.264H43.029L42.1,12.721A8.465,8.465,0,0,0,41.09,10.8a1.551,1.551,0,0,0-1.235-.54H39.25v4.679ZM39.184,8.3h.908a3.137,3.137,0,0,0,1.481-.27,1.328,1.328,0,0,0,.7-1.26,1.294,1.294,0,0,0-.5-1.137,3.09,3.09,0,0,0-1.677-.327h-.908Zm12.434,6.634V3.347h1.342V13.834h5.022v1.1ZM63.626,3.183a4.487,4.487,0,0,1,3.8,1.775,6.745,6.745,0,0,1,1.317,4.188,7.153,7.153,0,0,1-.605,2.961A4.618,4.618,0,0,1,63.618,15.1a4.5,4.5,0,0,1-3.8-1.775A6.815,6.815,0,0,1,58.5,9.081a7.051,7.051,0,0,1,.605-2.9A4.618,4.618,0,0,1,63.626,3.183Zm0,1.1a3.231,3.231,0,0,0-2.806,1.44,5.763,5.763,0,0,0-.9,3.362,5.71,5.71,0,0,0,1.072,3.7,3.445,3.445,0,0,0,5.423-.229,5.794,5.794,0,0,0,.908-3.411A5.605,5.605,0,0,0,66.252,5.5,3.237,3.237,0,0,0,63.626,4.288Zm15.9,4.671v5.481a10.2,10.2,0,0,1-1.734.479A9.6,9.6,0,0,1,76,15.1a5.161,5.161,0,0,1-3.8-1.456,5.848,5.848,0,0,1-1.636-4.352,6.279,6.279,0,0,1,1.644-4.556,5.1,5.1,0,0,1,3.845-1.554A8.072,8.072,0,0,1,79.446,4l-.393,1.072a6.617,6.617,0,0,0-3.043-.785,3.483,3.483,0,0,0-3.018,1.481,5.926,5.926,0,0,0-1.006,3.509,4.879,4.879,0,0,0,1.374,3.7A3.852,3.852,0,0,0,76.133,14a6.167,6.167,0,0,0,2.053-.368V10.063H75.9v-1.1Zm7.436-5.775a4.487,4.487,0,0,1,3.8,1.775,6.745,6.745,0,0,1,1.317,4.188,7.153,7.153,0,0,1-.605,2.961A4.618,4.618,0,0,1,86.955,15.1a4.5,4.5,0,0,1-3.8-1.775,6.815,6.815,0,0,1-1.317-4.245,7.051,7.051,0,0,1,.605-2.9A4.618,4.618,0,0,1,86.963,3.183Zm0,1.1a3.231,3.231,0,0,0-2.806,1.44,5.763,5.763,0,0,0-.9,3.362,5.71,5.71,0,0,0,1.072,3.7,3.445,3.445,0,0,0,5.423-.229,5.794,5.794,0,0,0,.908-3.411A5.605,5.605,0,0,0,89.589,5.5,3.237,3.237,0,0,0,86.963,4.288Z' transform='translate(129.137 24.857)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-position: center; + display: inline-flex; + justify-content: center; + align-items: center; +} diff --git a/packages/html-test-app/src/preview-examples/grid-padding.css b/packages/html-test-app/src/preview-examples/grid-padding.css new file mode 100644 index 00000000000..3229d7cf61a --- /dev/null +++ b/packages/html-test-app/src/preview-examples/grid-padding.css @@ -0,0 +1,35 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.grid { + padding-top: 1rem; + padding-bottom: 0.25rem; + background-color: var(--theme-color-ghost); +} + +.grid > ix-layout-grid { + margin-bottom: 1rem; +} + +.grid > ix-layout-grid > ix-row > ix-col ix-typography { + display: flex; + padding: 0.5rem; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 0; + align-self: stretch; + border: 1px solid var(--theme-color-soft-bdr); + background: var(--theme-color-ghost); + border-radius: 3px; +} diff --git a/packages/html-test-app/src/preview-examples/grid-padding.html b/packages/html-test-app/src/preview-examples/grid-padding.html index f4cb0e27f6c..1ce07b2c19a 100644 --- a/packages/html-test-app/src/preview-examples/grid-padding.html +++ b/packages/html-test-app/src/preview-examples/grid-padding.html @@ -13,7 +13,7 @@ Grid padding example - +
diff --git a/packages/html-test-app/src/preview-examples/grid-size.css b/packages/html-test-app/src/preview-examples/grid-size.css new file mode 100644 index 00000000000..3229d7cf61a --- /dev/null +++ b/packages/html-test-app/src/preview-examples/grid-size.css @@ -0,0 +1,35 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.grid { + padding-top: 1rem; + padding-bottom: 0.25rem; + background-color: var(--theme-color-ghost); +} + +.grid > ix-layout-grid { + margin-bottom: 1rem; +} + +.grid > ix-layout-grid > ix-row > ix-col ix-typography { + display: flex; + padding: 0.5rem; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 0; + align-self: stretch; + border: 1px solid var(--theme-color-soft-bdr); + background: var(--theme-color-ghost); + border-radius: 3px; +} diff --git a/packages/html-test-app/src/preview-examples/grid-size.html b/packages/html-test-app/src/preview-examples/grid-size.html index 1d9274d7dfc..9e746e9b69b 100644 --- a/packages/html-test-app/src/preview-examples/grid-size.html +++ b/packages/html-test-app/src/preview-examples/grid-size.html @@ -13,7 +13,7 @@ Grid size example - +
diff --git a/packages/html-test-app/src/preview-examples/grid.css b/packages/html-test-app/src/preview-examples/grid.css new file mode 100644 index 00000000000..3229d7cf61a --- /dev/null +++ b/packages/html-test-app/src/preview-examples/grid.css @@ -0,0 +1,35 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.grid { + padding-top: 1rem; + padding-bottom: 0.25rem; + background-color: var(--theme-color-ghost); +} + +.grid > ix-layout-grid { + margin-bottom: 1rem; +} + +.grid > ix-layout-grid > ix-row > ix-col ix-typography { + display: flex; + padding: 0.5rem; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 0; + align-self: stretch; + border: 1px solid var(--theme-color-soft-bdr); + background: var(--theme-color-ghost); + border-radius: 3px; +} diff --git a/packages/html-test-app/src/preview-examples/grid.html b/packages/html-test-app/src/preview-examples/grid.html index 88f545c6612..a31093398be 100644 --- a/packages/html-test-app/src/preview-examples/grid.html +++ b/packages/html-test-app/src/preview-examples/grid.html @@ -13,7 +13,7 @@ Grid example - +
diff --git a/packages/html-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css b/packages/html-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css new file mode 100644 index 00000000000..8f18e1e1252 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/icon-toggle-button-primary-ghost.html b/packages/html-test-app/src/preview-examples/icon-toggle-button-primary-ghost.html index ba6a1296ceb..5e089ddb3db 100644 --- a/packages/html-test-app/src/preview-examples/icon-toggle-button-primary-ghost.html +++ b/packages/html-test-app/src/preview-examples/icon-toggle-button-primary-ghost.html @@ -13,7 +13,7 @@ Icon toggle button primary ghost example - + Icon toggle button primary outline example - + Icon toggle button secondary ghost example - + diff --git a/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css b/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css new file mode 100644 index 00000000000..8f18e1e1252 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-outline.html b/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-outline.html index 84bc21dcd61..52fc613fe72 100644 --- a/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-outline.html +++ b/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary-outline.html @@ -13,7 +13,7 @@ Vite App - + diff --git a/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary.css b/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary.css new file mode 100644 index 00000000000..8f18e1e1252 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary.css @@ -0,0 +1,20 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary.html b/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary.html index b068e76915e..6b1be2ccc55 100644 --- a/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary.html +++ b/packages/html-test-app/src/preview-examples/icon-toggle-button-secondary.html @@ -13,7 +13,7 @@ Icon toggle button secondary example - + diff --git a/packages/html-test-app/src/preview-examples/init.js b/packages/html-test-app/src/preview-examples/init.js index f8fee96fa2a..7401db47e3e 100644 --- a/packages/html-test-app/src/preview-examples/init.js +++ b/packages/html-test-app/src/preview-examples/init.js @@ -9,7 +9,7 @@ import { defineCustomElements as ixIconsDefineCustomElements } from '@siemens/ix-icons/loader'; import { defineCustomElements } from '@siemens/ix/loader'; -import './styles/global.css'; +import './global.css'; function loadAdditionalTheme() { const theme = __THEME__; diff --git a/packages/html-test-app/src/preview-examples/kpi.css b/packages/html-test-app/src/preview-examples/kpi.css new file mode 100644 index 00000000000..9e007c2ee37 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/kpi.css @@ -0,0 +1,24 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.kpi { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + max-width: 20rem; +} + +.kpi > ix-kpi { + margin: 0.5rem; +} diff --git a/packages/html-test-app/src/preview-examples/kpi.html b/packages/html-test-app/src/preview-examples/kpi.html index c748aba5613..ff7e2a7fdd4 100644 --- a/packages/html-test-app/src/preview-examples/kpi.html +++ b/packages/html-test-app/src/preview-examples/kpi.html @@ -13,7 +13,7 @@ Kpi example - +
diff --git a/packages/html-test-app/src/preview-examples/menu-category.css b/packages/html-test-app/src/preview-examples/menu-category.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/menu-category.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/html-test-app/src/preview-examples/menu-category.html b/packages/html-test-app/src/preview-examples/menu-category.html index 347c78359e5..f5ce96c8ebe 100644 --- a/packages/html-test-app/src/preview-examples/menu-category.html +++ b/packages/html-test-app/src/preview-examples/menu-category.html @@ -13,7 +13,7 @@ Menu category example - + diff --git a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css new file mode 100644 index 00000000000..a726a2876a5 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css @@ -0,0 +1,17 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +ix-application { + width: 100vw; + height: 100vh; +} diff --git a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html index 94374054e92..98d703e1753 100644 --- a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html +++ b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html @@ -13,7 +13,7 @@ Menu with bottom tabs example - + diff --git a/packages/html-test-app/src/preview-examples/message-bar.css b/packages/html-test-app/src/preview-examples/message-bar.css new file mode 100644 index 00000000000..1b9e6501b51 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/message-bar.css @@ -0,0 +1,21 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.message-bar { + margin: 0.5rem; +} + +.message-bar > ix-message-bar { + margin-bottom: 0.5rem; + display: block; +} diff --git a/packages/html-test-app/src/preview-examples/message-bar.html b/packages/html-test-app/src/preview-examples/message-bar.html index 586d50001ce..3128b56a2d5 100644 --- a/packages/html-test-app/src/preview-examples/message-bar.html +++ b/packages/html-test-app/src/preview-examples/message-bar.html @@ -13,7 +13,7 @@ Message bar example - + diff --git a/packages/html-test-app/src/preview-examples/modal-sizes.css b/packages/html-test-app/src/preview-examples/modal-sizes.css new file mode 100644 index 00000000000..c1370c08e38 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/modal-sizes.css @@ -0,0 +1,23 @@ +/* + * 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. + */ +/* + * Styles get overwritten by html-test-app css files each build or dev task. + * If you want to modify the example styles do this only inside the html-test-app + */ + +.modal-sizes { + display: flex; + flex-direction: column; + align-items: center; +} + +.modal-sizes > ix-button { + width: auto; + margin: 0.25rem; +} diff --git a/packages/html-test-app/src/preview-examples/modal-sizes.html b/packages/html-test-app/src/preview-examples/modal-sizes.html index 715a9d45b7a..73f61fe154a 100644 --- a/packages/html-test-app/src/preview-examples/modal-sizes.html +++ b/packages/html-test-app/src/preview-examples/modal-sizes.html @@ -13,7 +13,7 @@ Modal sizes example - +