htmlelements / smart-webcomponents Goto Github PK

Describe the bug
smart grid
If the backend provides now rows, while the smart grid is setup to add rows, the add buttons don't show up.

Exemple is too complexe to show here.

Just use https://www.htmlelements.com/demos/grid/editing-add-row/ and try with emplty dataset

Describe the bug
I got error when try to use router with path to an external HTML, http://183.81.158.230/smarthtml/coba/

To Reproduce

const router = new Smart.Router('tampilanUtamanya', '/coba');

router.setRoutes([{{
path: '/cip',
template: '.${mvc.basePath}/tentang/templatTentang.htm',
title: 'Tentangnya'
}]);

router.route('/');

Expected behavior
template could be set with path to an external HTML

Screenshots

Desktop (please complete the following information):

• OS: fedora
• Browser: Firefox
• Version: any

"Anguiar", do you mean Angular?

Web Components, Anguiar UI Components and React UI Components for Professional Web Applications

Describe the bug
Changing the string filter options with text value already entered does not trigger a re-render.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.htmlelements.com/demos/table/filter-row/
2. Enter something in a row filter like "con panna" in Product Name
3. Change the string filter option to "does not contain"
4. No re-render occurs (even when losing focus on the input). You have to go back into the text input and press Enter.

Expected behavior
Table should be responsive to any user input.

Desktop (please complete the following information):

• OS:
  • Distributor ID: Pop
  • Description: Pop!_OS 21.10
  • Release: 21.10
  • Codename: impish
• Browser: chrome Version 102.0.5005.61 (Official Build) (64-bit)

目前用起来感觉不太方便，自己封装了自定义的Vue组件后，如果可以直接在content传入jsx就好了，但是目前必须传入HTML字符串

    {
      type: "LayoutGroup",
      orientation: "horizontal",
      items: [
        {
          type: "LayoutGroup",
          items: [
            {
              type: "LayoutPanel",
              id: "tabPanel",
              label: "Input",
              items: [
                {
                  label: "TextBox Tab",
                  content:
                    '<smart-multiline-text-box id="multiLine">Write more text here ...</smart-multiline-text-box>',
                },
                {
                  label: "Slider Tab",
                  content: <CustomComponent />,
                },
              ],
            },
          ],
          orientation: "vertical",
        }
      ],
    },
  ];```

Describe the bug
smart-tooltip doesn't open in the proper place when implemented in smart-table (appears to be at 0, 0).

To Reproduce
Steps to reproduce the behavior:

1. https://codepen.io/rpsirois/pen/GRQaaXN
2. Using the table billing history example as a base
3. Change the "Actions" column to render a button with a tooltip just like the tooltip "Basic" example

const id = 'tt' + settings.row
                            
// test not dom-connected
const $btn = document.createElement( 'smart-button' )
$btn.setAttribute( 'id', id )
$btn.textContent = 'Button'
  
const $tt = document.createElement( 'smart-tooltip' )
$tt.setAttribute( 'selector', id )
//$tt.selector = $btn
$tt.setAttribute( 'arrow', true )
$tt.textContent = 'This is a tooltip for row ' + settings.row
                          
const $span = document.createElement( 'span' )
                            
$span.append( $btn )
$span.append( $tt )
                            
settings.template = $span

Expected behavior
Tooltip to show up on button.

Desktop (please complete the following information):

• OS:
  • Distributor ID: Pop
  • Description: Pop!_OS 21.10
  • Release: 21.10
  • Codename: impish
• Browser: chrome Version 102.0.5005.61 (Official Build) (64-bit)

Improve Gantt Chart Performance with Large Data Sets

Describe the bug
When using the Smart Query Builder, you can subscribe for changes by listening for the "change" event. However, when setting the value dynamically (by directly setting the value property) the payload received in the event is not up to date.

To Reproduce
Steps to reproduce the behavior:

1. Set up the component in this way (here I'm using it inside of a Lit component):

<smart-query-builder
  id="querybuilder"
  .allowDrag=${true}
  .showIcons=${false}
  .fields=${[
    { label: 'My Field 1', dataField: 'field1', dataType: 'string' },
    { label: 'My Field 2', dataField: 'field2', dataType: 'string' },
  ]}
  @change=${this.onSmartQueryBuilderChange}
></smart-query-builder>

Where the listener function looks like this:

onSmartQueryBuilderChange(event: Event) {
  console.log(`received smart query builder change event`, event)
}

2. Change the query builder's value programmatically after a couple of seconds. For example:

setTimeout(() => {
  this.smartQueryBuilder.value = [['field1', '=', '123']]
}, 2000)

4. Check the browsers log and look at the event's detail.value field. It's an empty array (the value previous to being updated).

Expected behavior
Event.detail.value should contain "[['field1', '=', '123']]" which is what was dynamically set.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 102

Additional context
It looks like the event contains the value BEFORE it was updated to the new set value.

Hello, I see you have Angular, do you have ASP MVC Core components/tagHelpers

Hi, I would like to try out some ideas and run a few prototypes before investing more time in this lib.

Would it be possible to provide a Stackblitz template to quickly try out some things?

Specifically, I need to know if I can use allow-cells-wrap with infinitescroll, combo of these 2 demos:
https://www.htmlelements.com/angular/demos/grid/allow-cells-wrap/
https://www.htmlelements.com/angular/demos/grid/infinitescroll/

If it is supported we will migrate from ag-grid, who forbids such combination of options.

Thanks so much. 🍺

Describe the bug
The event is being involved after the first expansion. On the first expansion, it will not be triggered. After that every time you expand it the event will be correctly triggered.

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://codepen.io/dkeamcaksoem/pen/rNvGYJp?editors=1010
2. Open console
3. Expand any row
4. See an error

Both during the initial grid data load and when I user makes an action and I need to refresh the grid's data from a backend API, I want to set the grid to not allow updates, clear the data, and where it would at that point show "No Rows" I want to display a custom message like "Refreshing data" while on the initial load I want to show "Loading data".

I couldn't find any methods in the API documentation to do this. How to accomplish this?

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

If you select rows in multiple pages and remove them only current page is updated.
Rest of pages keep checked rows (as if they had not been removed)

Steps to reproduce the behavior

1. Select rows from multiple pages
2. Stay in one of the pages with selected rows
3. Click on remove
4. Check that all rows were removed from that page
5. Check other pages to see that rest of rows remain there selected
6. Check console to see the array with rows that were selected

Expected behavior
All pages should be updated. Rows are removed but only current page is updated.

JSFiddle
You can reproduce it here: https://jsfiddle.net/u8k2sL6v/1/

Browsers

• Chromium last version
• Firefox last version

Describe the bug
The new row is not added to the top and it is filled with improper data when using virtualDataSource.
In the example, the row should only have an id with the length of the total rows and should be added to the top.

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://jsfiddle.net/vz2w1top/2/
2. Click on 'Add' a few times
3. See an error

Expected behaviour
Expected a new row to be added to the top

Describe the bug
In the ev.detail.item (the object of the modified event) there is information only about allDay (boolean), dateStart and dateEnd.
There can be more information such as label, description, repeat(boolean), conference link, backgroundColor, status and notifications.
The most important are label and description

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://codepen.io/svetoslavb04/pen/rNdwxOd
2. Click on some date to add event
3. Fill the form
4. Submit it
5. See the logged object in the console. It contains only three props

Expected behaviour
The logged object should contain more props with the info about the object

Describe the bug
smart-text-box label overflows its bounds.

To Reproduce
Steps to reproduce the behavior:

1. Codepen modified from "Basic" example

Expected behavior
Label stays within boundaries of component.

Desktop (please complete the following information):

• OS:
  • Distributor ID: Pop
  • Description: Pop!_OS 21.10
  • Release: 21.10
  • Codename: impish
• Browser: chrome Version 102.0.5005.61 (Official Build) (64-bit)

Describe the bug
When you provide a date field to SmartQueryBuilder, it displays a DatePicker (or DatetimePicker depending on your field definition). DatePicker closes itself with year selection

To Reproduce
Steps to reproduce the behavior:

1. Go to docs
2. Click on datefield and select a date
3. Select year and change year (It works ok with first try, then it fails if you want to change again)
4. DatePicker closes itself immediately but it should wait for you to re-select month & day.

Expected behavior
DatePicker closes itself immediately but it should wait for you to re-select month & day.

Screenshots

Desktop (please complete the following information):

• MacOS
• Chrome
• Version 111.0.5563.110 (Official Build) (arm64)

Describe the bug

Filter button is not positioned correctly, when the Grid is used along with Bootstrap

To Reproduce
Steps to reproduce the behavior:

Add bootstrap.css to any Grid demo.

Hello
I got below issue when try to open the add event popup

core.js:4197 ERROR TypeError: Cannot read properties of undefined (reading 'en')
at HTMLElement._setEditorCommonProperties (smart.scheduler.js:6)
at HTMLElement._setPopupWindowEditor (smart.scheduler.js:6)
at HTMLElement._createWindowEditor (smart.scheduler.js:6)
at HTMLElement._setWindowContent (smart.scheduler.js:6)
at HTMLElement._setPopupWindowTemplate (smart.scheduler.js:6)
at r (smart.scheduler.js:6)
at HTMLElement._openWindow (smart.scheduler.js:6)
at HTMLElement._handleContextMenuItemClick (smart.scheduler.js:6)
at HTMLElement._tooltipClickHandler (smart.scheduler.js:6)
at HTMLElement.d (smart.element.js:

Ref: https://www.htmlelements.com/forums/topic/search-bug/

Describe the bug

On click of the Filter button, a console error is thrown.

To Reproduce

Steps to reproduce the behavior:

Add jquery.js to any Grid demo.

Describe the bug

• Using a grid component
  • with a column with 'phone' as the editor
  • with the auto add/edit feature (generating a dialog)
• 3 shortcomings
  • In the edit autogen dialog, the width of the phone widget is to short (can't see the number)
  • Using the UK flag, it switch to guernsey while editing the number
  • The add autogen dialog don't take into account the phone editor

To Reproduce
Steps to reproduce the behavior:
Create an app with grid and phone editor and auto add/edit feartures enabled

editing: {
    enabled: true,
    mode : 'row',
    action: 'none',
    addDialog: {
        enabled: true,
    },
    addNewRow: {
        visible: true,
        position: 'both'
    },
    dialog:{
        enabled: true,
        width: "15%"
    },
    commandColumn: {
        visible: true,
        position: 'far'
    }                    
},                

columns: [
	{ label: '#', dataField: 'id', /*width: 5,*/ allowEdit: false },
	{ label: 'First Name', dataField: 'firstname'/*, width: 50*/ },
	{ label: 'Last Name', dataField: 'lastname'/*, width: 50*/ },
	{ label: 'Address', dataField: 'address'/*, width: 150*/ },
	{ label: 'City', dataField: 'city'/*, width: 50 */},
        { label: 'Postal Code', dataField: 'postal_code'/*, width: 50*/ },
        { label: 'Country', dataField: 'country'/*, width: 50*/ },
        { label: 'Phone', 
          dataField: 'phone',
          editor: 'phone'
        },
        { label: 'LinkedIn', dataField: 'linkedin'/*, width: 150*/ },
        { label: 'Birthday', dataField: 'birthday'/*, width: 50*/ },
        { label: 'Email', dataField: 'email'/*, width: 50*/ },		
]

1. I set the flag to uk and it turns to Guernsey when I start editing the number
2. You can see on the image the phone field is too small

The add dialogue don't have the 'phone' editor

Describe the bug

Same context as #103

User directive font looks like a Courier or similar.

Describe the bug
When using the Smart Query Builder, you can set dynamically the component's value property during run time, and it properly displays visually. But after doing that, if you click on the "x" button, the "change" event does not fire.

To Reproduce
Steps to reproduce the behavior:

1. Set up the component in this way (here I'm using it inside of a Lit component):

<smart-query-builder
  id="querybuilder"
  .allowDrag=${true}
  .showIcons=${false}
  .fields=${[
    { label: 'My Field 1', dataField: 'field1', dataType: 'string' },
    { label: 'My Field 2', dataField: 'field2', dataType: 'string' },
  ]}
  @change=${this.onSmartQueryBuilderChange}
></smart-query-builder>

Where the listener function looks like this:

onSmartQueryBuilderChange(event: Event) {
  console.log(`received smart query builder change event`, event)
}

2. Change the query builder's value programmatically after a couple of seconds. For example:

setTimeout(() => {
  this.smartQueryBuilder.value = [['field1', '=', '123']]
}, 2000)

3. Check the filter appears in the UI, and then click on the "x" next to it:

4. Check the browsers log to check the emitted event fired when you changed the current query on step 3.

Expected behavior
A change event should fire up since the value changed.

Screenshots
Notice the missing log when I click on the x button:

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 102

Additional context
The event does fire if you set the value programmatically more than once in a row.

Describe the bug
Cells retain previous style state on re-render.

To Reproduce
Steps to reproduce the behavior:

1. I used the table overview example and simply added the virtualization property and removed the manual style reset in the formatFunction for the status column (originally line #69).
2. CodePen
3. Scroll the table

Expected behavior
Cells are completely re-rendered per the configured format from default (no need to clear dirty state).

Desktop (please complete the following information):

• OS:
  • Distributor ID: Pop
  • Description: Pop!_OS 21.10
  • Release: 21.10
  • Codename: impish
• Browser: chrome Version 102.0.5005.61 (Official Build) (64-bit)

Is your feature request related to a problem? Please describe.
the saveAsJPEG, saveAsPNG, saveAsPDF can be shown icons on right hand corner of chart

Describe the solution you'd like
for eg: if i consider the following html and have additional input [exportNPrint]

<smart-chart #chart id="chart" [caption]="caption" [description]="description" [showLegend]="showLegend"
[padding]="padding" [titlePadding]="titlePadding" [dataSource]="dataSource" [colorScheme]="colorScheme"
[xAxis]="xAxis" [clip]="clip" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups" [exportNPrint] = "">

if it renders the inside the chart ( the filename can be defaulted to caption value if exists or default file name always)

It will improve the developer productivity

Describe alternatives you've considered
NA
Additional context
Add any other context or screenshots about the feature request here.

Tried version 8.0.0 smart.maskedtextbox and when using keyboard navigation to tab to it, it doesn't appear to show a selection on focus. I tried tweaking the CSS and when I click on it, I was able to get focus shown, but when setting tabindex attribute or tabbing to it doesn't appear to work.

The smart-accordion component should be accessible via keyboard for mobility impaired users. And while you do have code in the component to handle keyboard navigation, it throws an error when used.

To Reproduce

1. Create a smart-accordion component
2. Tab to one of the accordion panels
3. Click click the 'Enter' key to open the panel with the keyboard
4. Panel does not open as expected and code throws "Uncaught TypeError: Cannot read property 'expanded' of undefined" error.

Expected behavior
Panel opens with keyboard click.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version 87

Additional context
I know this can be fixed by adding custom CSS, but your out-of-the-box styles fail WCAG rule 2.4.7 for showing keyboard focus. Please see https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

Is your feature request related to a problem? Please describe.
Is there a way to apply horizontal scroll to smart tree elements when the data goes out of width.

Hi! I am fascinated by some awesome work done by you. I'm new to smart web components. I have used this plugin for a laravel-vite project. But I have got stuck since there is one issue with the smart web components. The thing is it is working well within the dev version but raise an error in production mode. The error looks like this.

I am in need of help and if there is a solution please shoot me an email. My email address is [email protected].
Thanks in advance.

Hi there,

I am currently evaluating your component package for use in a commercial application. I tried to figure out the licensing but I am a bit confused. The page [Community & Professional/Enterprise](https://www.htmlelements.com/docs/community-and-enterprise) states

Smart comes in two forms: Community (free, including production use) ...

but then, when installing the npm package via ...

npm i smart-webcomponents-community

... the file EULA.pdf is put into node_modules/smart-webcomponents-community/EULA.pdf which states the contrary ....

You must acquire a license for the Software directly from the Author or its authorized resellers. If your website or product has no commercial intent and does not generate any direct or indirect revenue you may acquire a license without paying a fee. For all other cases you must purchase a commercial license of the Software.

To me it seems that commercial use of he community edition is prohibited without having a paid license. Is that true?

So lonG

Describe the bug
Frozen column sits on top of first column.

To Reproduce
Steps to reproduce the behavior:

1. (Using striped table example: https://www.htmlelements.com/demos/table/table-striped/)
2. Go to https://codepen.io/rpsirois/pen/XWZGqjE
3. Add properties: filtering, filterRow, selection, selectMode: 'extended'
4. Change "Country" column config to {dataField:'Country',freeze:true}

Expected behavior

• Selection checkboxes flush to left side.
• Frozen row not overlaid on top of other columns.

Desktop (please complete the following information):

• OS:
  • Distributor ID: Pop
  • Description: Pop!_OS 21.10
  • Release: 21.10
  • Codename: impish
• Browser: chrome Version 102.0.5005.61 (Official Build) (64-bit)

Trying to test out Grid in 8.0.0 via ES 6 module,

Have my import as:
import {Grid} from 'smart-webcomponents/source/modules/smart.grid';

And my HTML CSS resource included as:
<require from="smart-webcomponents/source/styles/smart.default.css"></require>

In my javascript code, I init it as:

            get properties() {
                return {
                    behavior: {
                        allowColumnReorder: true,
                        columnResizeMode: 'growAndShrink',
                        allowColumnAutoSizeOnDoubleClick: true
                    },
                    appearance: {
                        alternationCount: 2
                    },
                    paging: {
                        enabled: true,
                        pageSize: 12,
                        summary: {
                            visible: true,
                            position: 'far'
                        },
                        pageSizeSelector: {
                            visible: true
                        }
                    },
                    pager: {
                        visible: true
                    },
                    sorting: {
                        enabled: true
                    },
                    dataSource: new window.Smart.DataAdapter({
                        dataSource: data,
...

Value of above data is a JSON array that I get from server. And I do get the grid to populate data. The columns don't all fit in the width so there is a horizontal scrollbar displayed on bottom of the grid as I would expect but when I move it to the right to see more data I see the grid only move the header row and the first row while the other rows stay in place as shown in the screen shot:

And I see this displayed in console as error:

As as shown on the screen shot, the pager is missing an icon

Describe the bug
When rendering time series data, the tool tip shows wrong day when x-axis is marked as type 'date'

To Reproduce
Steps to reproduce the behavior:

Sample Data:

[
{"Date":"2022-05-01","As Is Performance":72},
{"Date":"2022-05-02","As Is Performance":73},
{"Date":"2022-05-03","As Is Performance":1E+2},
{"Date":"2022-05-04","As Is Performance":123},
{"Date":"2022-05-21","As Is Performance":82},
{"Date":"2022-05-25","As Is Performance":18},
{"Date":"2022-06-05","As Is Performance":51},
{"Date":"2022-06-06","As Is Performance":57}
]

chart configuration:

caption = 'Metric';
description = 'As Is Performance';
showLegend = true;
padding = { left: 30, top: 5, right: 30, bottom: 5 };
titlePadding = { left: 50, top: 0, right: 0, bottom: 10 };
dataSource = [];
colorScheme = 'scheme32';
xAxis = {
dataField: 'Date',
type: 'date',
baseUnit: 'month',
tickMarks: {
visible: true,
unitInterval: 1,
color: '#BCBCBC'
},
gridLines: {
visible: true,
unitInterval: 30,
color: '#BCBCBC'
}
};
clip = true;
valueAxis = {
visible: true,
title: { text: 'Percentage (%)' },
tickMarks: { color: '#BCBCBC' },
unitInterval: 30,
minValue: 0,
maxValue: 150
};
seriesGroups = [
{
type: 'line',
series: [
{ dataField: 'As Is Performance', displayText: 'As Is', labels: { visible: true, formatSettings: { sufix: '°' } }, symbolType: 'circle', symbolSize: 8 },
]
}
];

Expected behavior
The tooltip should show exact day instead of previous day

Screenshots

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version latest

sometime data and form not same, for example when we have data user like this:

user={
   id:1,
  first_name:'Herman',
 last_name:'Sukoco'
}

when i try  set above data (first_name and last_name only) to form , form will throw

]

so i hove you check if not missing before setValue

if(that.controls[name]){
  //then set value
    that.controls[name].setValue(value[name], {
                        onlySelf: true,
                        emitEvent: options.emitEvent
                    });
}

TIA

_recycle() {
                    const e = this;
                    if (!e._recyclingItems) return;
                    let t = e._height;
                    e._height || (t = e._height = e.$.itemsContainer.offsetHeight);
                    let i = 0;
                    const r = e.scrollTop, o = e._getItemIndexByPosition(r),
                        s = e.filterable && e.$.filterInput.value.length > 0 ? e._filteredItems : e._items, n = s[o];
                    let l = n ? n.top : 0;
                    if (e.$.itemsInnerContainer.style.left = -e.scrollLeft + "px", e.$.itemsInnerContainer.style.top = -r + l + "px", e.isUpdating++, o >= 0) {
                        const n = s.length;
                        for (let a = o; a < n; a++) {
                            const o = s[a];
                            if (0 !== o.height) {
                                if (!(l + o.height >= r && l <= r + t)) break;
                                {
                                    const t = e._recyclingItems[i++];
                                    if (!t) break;
                                    t.setAttribute("aria-setsize", n), t.setAttribute("aria-posinset", a), t.context = document, t.dataItem = o, t.label = o.label, t.value = o.value, t.selected = o.selected, t._focused = o._focused, t.hidden = o.hidden, t.grouped = o.grouped, t.readonly = o.readonly, t.style.height = o.height + "px", e._alternateItem(t), o.title ? t.title = o.title : t.title = "", o.grouped ? t.displayMode = "plain" : t.displayMode = o.displayMode, e.scrollWidth > 0 && (t.style.width = e.$.itemsInnerContainer.offsetWidth + e.scrollWidth + "px"), e.itemTemplate && e._handleItemTemplate(e.itemTemplate) && e._applyTemplate(t, !1)
                                }
                                l += o.height
                            }
                        }
                    }
                    if (i < e._recyclingItems.length) for (let t = i; t < e._recyclingItems.length; t++) {
                        const t = e._recyclingItems[i++], r = t.context;
                        t.context = document, t.hidden = !0, t.context = r
                    }
                    e.isUpdating--
                }

当表格数据超过100行过后，这个函数的执行效率非常的慢。
_recycle函数很多地方都有调用，能否在后续版本优化下这里。
非常感谢！

Importing the lib causes an exception. This is the case for the last few version.
I am really frustrated with this lib. You have breaking changes in minor versions, poorly typed events and really bad performance because you run change detection on mouse move, which you should NEVER do!
I don't know why my company spent quite a lot of money on this and I would expect a better product for this price.

"smart-webcomponents-angular": "^13.0.30"
Chrome Version 99.0.4844.82 (Official Build) (64-bit)
Linux

TypeError: s.startsWith is not a function
    at _.defineElementMethods (smart.ganttchart.js:62:72606)
    at _.defineElement (smart.ganttchart.js:62:68085)
    at Function.register (smart.ganttchart.js:62:76708)
    at window.<computed> (smart.ganttchart.js:62:83605)
    at smart.ganttchart.js:62:93646
    at Object.6321 (smart.ganttchart.js:62:2)
    at __nested_webpack_require_2095860__ (smart.ganttchart.js:205:12)
    at smart.ganttchart.js:247:75
    at smart.ganttchart.js:244:1
    at Object.6626 (smart.ganttchart.js:7:10)
    at __webpack_require__ (bootstrap:19:1)
    at Module.71476 (mapOneOrManyArgs.js:8:1)
    at __webpack_require__ (bootstrap:19:1)
    at Module.66346 (temporal-view.module.ts:33:34)
    at __webpack_require__ (bootstrap:19:1)

Describe the bug

• The smart-password-text-box overlaps with the Ok or Ko icon in all browers while used in a form
• In Chrome, the see icon don't allows to actually see the password
• • see: https://vscode.seadev.xyz/signin.html

To Reproduce

<body class="viewport">
        <div class="smart-grid-layout">
            <div class="row">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <smart-card class="basic-card" style="width: fit-content;">
                        <div class="card-content" style="padding: 1% 1% 1% 1%;">
                            <h1  class="card-title">Sign In to SeaDev.xyz dev</h1>
                            <div class="smart-form-row">
                                <form id="signInForm" onsubmit="return false;">
                                    <div class="smart-form-row">
                                        <label>
                                            User Name:
                                        </label>
                                        <smart-input class="underlined" form-control-name="userName" id="userName"></smart-input>
                                    </div>

                                    <div class="smart-form-row">
                                        <label>
                                            Password:
                                        </label>
                                        <smart-password-text-box class="underlined" form-control-name="Password" id="Password"></smart-password-text-box>
                                    </div>

                                    <div class="smart-form-row submit">
                                        <smart-button class="success" form-control-name="submit" type="submit" onClick="auth()">Submit</smart-button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </smart-card>
                </div>
                <div class="col-sm-4"></div>
            </div>
        </div>
        <script type="module" src="/source/modules/smart.form.js"></script>
        <script type="module" src="/source/modules/smart.input.js"></script>
        <script type="module" src="/source/modules/smart.button.js"></script>
        <script type="module" src="/source/modules/smart.validator.js"></script>
        <script type="module" src="/source/modules/smart.passwordtextbox.js"></script>
        <script type="module" src="/source/modules/smart.card.js"></script>
</body>

Expected behavior

• Ability to have the required icon and the see icon active (they overlap)
• Clicking on see (which is always overlapped on any browser)
  • don't work (Chrome): i.e. clecking on see icon don't show password
  • works on Firefox and Edge
    Screenshots
    You can see the see icon rigth behind the green check (very small)
    

Desktop (please complete the following information):

• OS: [e.g. iOS]: Windows 11
• Browser
  • Chrome Version 117.0.5938.150 (Build officiel) (64 bits)
  • Edge Version 117.0.2045.55 (Version officielle) (64 bits)
  • Firefox 118.0.1 (64 bits)

Description
If you define 2+ datasets with with a ReportsTo attribute of null and click on a column for sorting, the grid components adds a gap on top of the list.

To Reproduce
Steps to reproduce the behavior:

1. Based on demo of webcomponents-demos/grid/tree-grid/
2. Set the ReportsTo attribute of two or more datasets to null (see index.js)
3. Click on the column header of Last Name for sorting
4. Gap is added to the top of the list - see screenshot below:

Desktop

• OS: Linux
• Browser: Chromium and Firefox
• Tested with Smart-webcomponents 12.x and 13.x

index.js:

/// <reference path="../../../source/typescript/smart.elements.d.ts" />
window.Smart('#grid', class {
    get properties() {
        return {
            dataSource: new window.Smart.DataAdapter({
                dataSource: [
                    { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
                    { "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
                    { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
                    { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": null, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
                    { "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": null, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
                    { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": null, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                    { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                    { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
                    { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
                ],
                keyDataField: 'EmployeeID',
                parentDataField: 'ReportsTo',
                id: 'EmployeeID',
                dataFields: [
                    'EmployeeID: number',
                    'ReportsTo: number',
                    'FirstName: string',
                    'LastName: string',
                    'Country: string',
                    'City: string',
                    'Address: string',
                    'Title: string',
                    'HireDate: date',
                    'BirthDate: date'
                ]
            }),
            sorting: {
                enabled: true
            },
            filtering: {
                enabled: true
            },
            behavior: { columnResizeMode: 'growAndShrink' },
            onRowInit: function (index, row) {
                if (row.id === 2) {
                    row.expanded = true;
                }
            },
            columns: [
                { label: 'First Name', dataField: 'FirstName', width: 200 },
                { label: 'Last Name', dataField: 'LastName', width: 200 },
                { label: 'Title', dataField: 'Title', width: 160 },
                { label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
                { label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
                { label: 'Address', dataField: 'Address', width: 250 },
                { label: 'City', dataField: 'City', width: 120 },
                { label: 'Country', dataField: 'Country' }
            ]
        };
    }
});

Describe the bug
Tooltip is unable to find the target element with selector property (when it's a string) in the shadow DOM.

To Reproduce
Steps to reproduce the behavior:

1. Place a tooltip in a shadow dom with a string selector
2. Hover on the element with the id that selector is pointed at
3. Nothing happens (codepen)

Expected behavior
Tooltip functions as normal.

Desktop (please complete the following information):

• OS:
  • Distributor ID: Pop
  • Description: Pop!_OS 21.10
  • Release: 21.10
  • Codename: impish
• Browser: chrome Version 102.0.5005.61 (Official Build) (64-bit)

Table onchange event isn't triggered when removing rows in v9.3.18
This was working previously at least in v9.1.0

Steps to reproduce the behavior

1. Select a row
2. Check console to see Table changed because a row was selected
3. Click on remove
4. Check console to see event wasn't triggered

Expected behavior
onchange event has to be triggered when rows are removed

JSFiddle
You can reproduce it here: https://jsfiddle.net/q5boj1x2/

Browsers

• Chromium last version
• Firefox last version

Hello, can you share some samples on how to use in MVC core and host on Linux.

Also a simple architecture view of how developers can build ViewComponents or partialViews components/pieces of this to reuse from their back end.

Lastly can you share a portal demo with widgets that can have common things like settings, print, export to excel pdf, etc. We want to let user change the chart type inside the dashboard