Web Components Theme Builder

Theme Builder

We are excited to announce that the Theme Builder for Smart Web Components is available now.
We have built a new web tool that enables you to create or customize existing themes. The Theme builder generates a CSS file, which you can download and apply to your web application. The good news is that the tool is Shadow DOM friendly, because of the CSS variables support deeply integrated into Smart Web Components.
theme builder for web components

Highlights

  • Create or customize a theme.
  • Customize basic and advanced web components settings.
  • Light and Dark rendering modes.
  • Export and Import changed settings.
  • Export the Theme as CSS file or copy it directly from a text field.

Using the theme builder

Navigate to the theme builder application at the Theme Builder web page. The theme builder application page is divided into two main sections - theme settings on the left and preview on the right.
  • Click the accent color to change the theme and start over.
  • Click the Theme chooser to choose 'Light' or 'Dark' theme mode.
    theme builder for web components 2
  • Click the color pickers in the theme settings section to select your desired colors. The selected colors are applied automatically in the 'Preview'.
  • Click the 'Export' button, when you are ready, to save your theme or theme settings.

    theme builder for web components 2

    The downloaded theme comes as a smart.custom.css file. "custom" is the theme's name, which you can change from the export window.


Advanced settings

The advanced settings mode adds many more customization options for precise Theme design. From the left section, you can choose which component category to design and select a color for specific settings such as "Row Alternation Text Color".

theme builder for web components 3

  • More customization settings for each Smart Web Component and each part of the web component. This allows you to customize an existing theme just for some of the web components.
  • Import or Export theme settings. Import previously saved Theme settings by clicking the "Import" button:

    theme builder for web components 4


HTML Elements
, , , , , , , , , , , , , , , , , ,

Leave a comment

Grid Charting, Nested Grid Dialog, TreeGrid Checkboxes

Smart HTML Elements v4.5.0 Release, Sep-19-2019

The latest version just came out with multiple new Smart.Grid features. The list with all changes is below:

Nested Grid Dialog

What's New:

  • Smart.Grid Charting - Data visualization of Grid data in a Chart. Grid Charting
  • Smart.Grid Resize - Resize Rows and Columns, when the right-border is double-clicked. The feature is optional.
  • Smart.Grid Cells Wrap. Wrapping of Cells Values is now available as an option. Grid Row Header Icons
  • Smart.Grid rowHeight property 'auto' option. Auto-sizes Grid rows based on the contents.
  • Smart.Grid column.width - 'auto' option. Automatically calculates the columns width based on the contents.
  • Smart.Grid in TreeGrid mode checkboxes with hierarchical three-state selection. Tree Grid Checkboxes
  • Smart.Grid Column and Row Header Edit. Allows you to change the label of a Header.

What's Fixed:

  • Fixed an issue with focused value visualization after end edit.
  • Fixed an issue about Slider CSS related to the value visualization.
  • Fixed an issue about Smart.DataAdapter when new items are dynamically added.
  • Fixed an issue about Smart.GanttChart related to its rendering and method invocation.
  • Fixed an issue about smart.elements.js. The file did not include all scripts.
  • Fixed an issue in the Smart.Grid about the clearSelection method when checkboxes selection is enabled.
  • Fixed an issue in the Smart.Grid about the clearSelection method when multiple cells selection is enabled.
  • Fixed an issue in the Smart.Grid about the select method when trying to select a cell with it.
  • Fixed an issue in the Smart.Grid about the edit dialogs not removing after removing the Grid from the DOM.
  • Fixed an issue in the Smart.Grid about the editing when endEdit is called and not all columns are visible.
  • Fixed an issue in the Smart.Grid about dynamically showing/hiding the command column.
  • Fixed an issue in the Smart.Grid about dynamically setting the column's editor property.
  • Fixed an issue in the Smart.Grid about dynamically showing/hiding the addNewRow.
  • Fixed an issue in the Smart.Grid about dynamically setting the 'appearance.autoShowColumnActionButton' property.
  • Fixed an issue in the Smart.Grid about setting rowDetail.height dynamically.
  • Fixed an issue in the Smart.Grid about the grouping when appearance.autoShowColumnActionButton = false is dynamically set.
  • Fixed an issue in the Smart.Grid about dynamically setting header.template.
  • Fixed an issue in the Smart.Grid about using addFilter method.
  • Fixed an issue in the Smart.Grid about addFilter method. Now the method can be called with String param like that: grid.addFilter('lastName','startswith B');
  • Fixed an issue in the Smart.Grid about multiple column nesting.
  • Fixed an issue in the Smart.Grid about data export when clearGroups is called before the data export.
  • Fixed an issue in the Smart.Grid about dynamically setting the row.freeze property.
  • Fixed an issue in the Smart.Grid about setting dynamically the columns property by index. Ex: - grid.columns[1] = { label: 'New Last Name', dataField: 'lastName' };
  • Fixed an issue in the Smart.Grid about setting dynamically the checkBoxes.visible property, when TreeGrid is enabled.

Breaking Changes

The Grid API is updated with new "behavior" and "layout" categories. Some of the existing properties are moved into that categories. To migrate from previous versions to 4.5.0, we advice you to look at the Grid API Docs: https://www.htmlelements.com/docs/grid-api/. The changes are related to: rowHeight, rowMinHeight, columnWidth, columnResizeMode, rowResizeMode, showRowNumber, scrollMode.
HTML Elements, Javascript

Leave a comment

Advanced Data Visualization with Grid Charting

Smart.Chart integration with Smart.Grid

The next version of Smart Web Components will bring integrated charting functionality that allows users to chart directly inside the Grid Web Component. We are happy to announce that Smart Grid is the First Enterprise Grid with such feature available.

The charting is implemented through our Smart.Chart Web Component and is using the grid data source. Charts can be exported to .PDF, .PNG of .JPEG.

There are two approaches to create a Chart.

  • Create a Chart by using the Grid's selection. Smart.Grid supports several selection modes - selection by cells like in Spreadsheets, columns and rows selection.
  • Create a Chart by using the Grid and Chart API. This solution allows us to use the full data set.

Smart.Chart

The charting used in the Grid and Chart integration is our own-made Smart.Chart component. Smart.Chart is a Web Component built through the Smart Framework and is based on the broadly used jQWidgets Charting solution. It does not have any third-party dependencies. It is created by our own Team as all other UI components in our package.

Grid and Chart Integration

Chart Toolbar

The Toolbar with Charting options is displayed in the Grid header. By clicking a Chart Type, the Grid will create it.

To create Charts, users will need to import the Smart.Grid, Smart.Chart and Smart.Window modules and enable the Charting in the Grid.

Below is displayed a Chart created through selection by dragging or by keyboard navigation a Cells Range of Numeric values. Area Chart by Grid Selection

Charts are displayed in our Smart.Window component. You can resize it, maximize it, move it, change its header position, stick it to screen edge, minimize it or just collapse it. Smart.Window is designed to be the most feature-complete Dialog component. It can be either modal or non-modal.

Below is displayed a Bar Chart created by selecting multiple rows.

Bar Chart by Grid Selection

Below is displayed a Pie Chart created by selecting multiple columns.

Pie Chart by Grid Selection

Below is displayed a Column Chart by cells selection.

Column Chart by Grid Selection

Charts Settings

As our Charting solution is evolving for the last 10 years, it has quite a lot of settings and Chart types like Financial Charts, Zooming, Spider Charts, etc. You may learn more about our Charting on our demos and documentation pages.

HTML Elements, Smart Grid, Smart.Chart
, , ,

Leave a comment

Smart HTML Elements v4.3.0 Release

Smart HTML Elements v4.3.0 Release, Aug-28-2019

What's New:

  • Smart.App is extended with 'formData' and 'jsonData' properties. 'jsonData' gets the raw 'data' object. 'formData' gets a FormData object.
  • Smart.App is extended with 'smart-model' binding to 'Date' objects.
  • >
  • Smart.Grid duplicate columns support.
  • Smart.Grid dataBind method, which allows you to perform a new data bind operation.
  • Smart.DataAdapter dataFields property can be set dynamically.
  • Smart.MaskedTextBox support for [a-zA-Z] mask with the 'y' mask character.

What's improved:

  • Multiple columns can be added to the Grid with single 'push' or 'splice' method call.
  • Default text editor for numeric columns allows only number input now.
  • Dynamic freezing of columns.

What's Fixed:

  • Fixed an issue in the Grid about adding new rows, when batch editing is enabled and height is 'auto'.
  • Fixed an issue in the Grid about adding new columns with existing dataField.
  • Fixed an issue in the Grid about vertical scrollbar's far button visibility, when rows are added dynamically.
  • Fixed an issue in the Grid about setting dynamically the dataSource property, when virtual mode is enabled.
  • Fixed an issue in the Grid about adding new row with auto add and checkbox editing.
  • Fixed an issue in the Grid about setting selection of rows when virtual scrolling is enabled.
HTML Elements

Leave a comment

Data Export to XLSX, PDF, CSV, TSV, XML, HTML and JSON

The newest 4.2.0 version of the Smart UI toolkit includes a very important business feature - Grid Data Export. You can now export the data from your grid component to various formats. The supported formats are .xlsx, .xml, .pdf, .csv, .tsv, .html and .json. You can also import data from .xlsx file. The Export feature takes into account the Grid Style, Data Format, Data Type and whether the data is grouped by some criteria. Check out the updated Grid demos: https://www.htmlelements.com/demos/grid/data-export/.
Smart Grid

Leave a comment

Using Web Components with Angular

We are happy to announce that with the release of Smart HTML Elements ver. 4.1.0, we added "Using with Angular" example for each web component. These Angular examples are available in the Demos section and will help you to use our Web Components in your current or future Angular projects. The source code is included in the download package and can be found in the demos/angular/ folder. The full list of changes in ver.4.1.0 can be found here: https://www.htmlelements.com/docs/release-notes/.

Data Grid Angular Demo: Grid with Angular
Uncategorized

Leave a comment

Smart HTML Elements v4.0.0 Release

Smart HTML Elements v4.0.0 Release, Aug-01-2019


What's New:


  • Gantt Chart Web Component
  • File Upload Web Component
  • DropDownButton Web Component
  • Sortable Web Component
  • Color Panel Web Component
  • Color Picker Web Component
  • Query Builder Web Component
  • Validator Web Component
  • New Button styles
  • New Grid Demos

What's Fixed:


  • Fixed an issue in the Grid about Cells Selection when there are frozen rows.
  • Fixed an issue in the Grid about Cells Selection when there is checkbox selection column.
  • Fixed an issue in the Grid about Cells Editing when the column's template is 'checkBox' and the editor is 'input'.
  • Fixed an issue in the Grid about Cells Selection Focus when user clicks outside the Grid, the Focus stays in the Grid.
  • Fixed an issue in the Grid about the rendering, when the columnHeight property is changed dynamically.
  • Fixed an issue in the Grid about the rendering of Row Headers when Alternation is applied.
  • Fixed an issue in the Grid about Row/Col resizing and Selection. Selection is not applied when you start resizing a row or column.
  • Fixed an issue in the Grid about the columnHeader.visible property when it is changed dynamically.
  • Fixed an issue in the Grid about header and footer templates. No effect when set.
  • Fixed an issue in the Grid about the columnWidth property when it is changed dynamically.
  • Fixed an issue in the Grid about the showTooltips property when it is changed dynamically.
  • Fixed an issue in the Grid about the showRowNumber and showRowHeader properties when changed dynamically.
  • Fixed an issue in the Grid about the showResizeTooltips property when it is changed dynamically.
  • Fixed an issue in the Grid about the horizontal scrolling when 'template' is applied to a column.
  • Fixed an issue in the Grid about the showColumnIcon property when the property is changed dynamically.
  • Fixed an issue in the Grid about the showColumnDescriptionButton property when the property is changed dynamically.
  • Fixed an issue in the Grid about the showSortColumnBackground property when the property is changed dynamically.
  • Fixed an issue in the Grid about the showFilterColumnBackground property when the property is changed dynamically.
  • Fixed an issue in the Grid about the Filtering when the Grid has frozen rows, the rows that did not match the filter were not rendered correctly.
  • Fixed an issue in the Grid about the showVerticalScrollBarOnFixedColumns property when it is changed dynamically.
  • Fixed an issue in the Grid about the allowColumnSortButtonAnimation when the property is changed dynamically.
  • Fixed an issue in the Grid about the sorting of boolean columns when the dataType is set to 'bool', not to 'boolean'.
  • Fixed an issue in the Grid about the ensureVisible method and keyboard navigation when there are frozen rows and columns.
  • Fixed an issue in the Grid about the alternation of rows. The alternationEnd was not taken into account.
HTML Elements, Smart Grid, Web Components

Leave a comment

DockingLayout Web Component with Angular

Using Smart.DockingLayout Web Component in Angular application


This post shows how to use the DockingLayout component with Angular and how easy the integration is.

app.component.html


In the app.component.html, we add the smart-docking-layout tag.
<smart-docking-layout [layout]="layout"></smart-docking-layout>  


app.module.ts


To make Angular work with Web Components, we add the CUSTOM_ELEMENTS_SCHEMA to the app module and import the Smart Elements

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  
 import { BrowserModule } from '@angular/platform-browser';  
 import { FormsModule } from '@angular/forms';  
 import { AppComponent } from './app.component';  
 import '@smarthtmlelements/smart-elements/source/smart.elements.js';  
 @NgModule({  
   declarations: [AppComponent],  
   imports: [BrowserModule, FormsModule],  
   schemas: [CUSTOM_ELEMENTS_SCHEMA],  
   providers: [],  
   bootstrap: [AppComponent]  
 })  
 export class AppModule { }  

app.component.ts

Below, we put the Docking Layout component's settings.
import { Component, ViewChild, AfterViewInit } from '@angular/core';  
 import { setTimeout } from 'timers';  
 @Component({  
   selector: 'app-root',  
   templateUrl: './app.component.html',  
   styleUrls: ['app.component.css']  
 })  
 export class AppComponent implements AfterViewInit {  
   layout: any = [  
     {  
       type: 'LayoutGroup',  
       orientation: 'horizontal',  
       items: [  
         {  
           id: 'item0',  
           label: 'Tabs 0',  
           autoHide: true,  
           autoHidePosition: 'left',  
           tabPosition: 'bottom',  
           items: [{  
             label: 'Tab A',  
             selected: true,  
             content: 'What is Lorem Ipsum?\n' +  
               'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of' + 'type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in ' + 'the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n' +  
               'Why do we use it?\n' +  
               'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal ' + 'distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their' + 'default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on ' + 'purpose (injected humour and the like).'  
           }]  
         },  
         {  
           type: 'LayoutGroup',  
           items: [  
             {  
               tabPosition: 'bottom',  
               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: '<smart-slider id="slider"></smart-slider>'  
               }],  
               size: '50%'  
             },  
             {  
               type: 'LayoutPanel',  
               label: 'Output',  
               items: [  
                 {  
                   id: 'outputTab',  
                   label: 'Output',  
                   headerPosition: 'none',  
                   content: 'Write more text here ...'  
                 }  
               ]  
             }  
           ],  
           orientation: 'vertical'  
         }  
       ]  
     }]  
   ngAfterViewInit(): void {  
     document.readyState === 'complete' ? init() : window.onload = init;  
     function init() {  
       document.getElementById('tabPanel').addEventListener('change', (event: any) => {  
         if (event.target instanceof window['Smart'].Slider) {  
           document.getElementById('outputTab').innerHTML = event.detail.value;  
         }  
         else if (event.target instanceof window['Smart'].MultilineTextBox) {  
           document.getElementById('outputTab').innerHTML = event.target.value;  
         }  
         else if (event.target.tagName === 'Smart-TABS') {  
           const selectedTabItem = event.target.getElementsByTagName('smart-tab-item')[event.target.selectedIndex];  
           if (selectedTabItem === undefined) {  
             return;  
           }  
           if (selectedTabItem.label.toLowerCase().indexOf('slider') > -1) {  
             document.getElementById('outputTab').innerHTML = selectedTabItem.querySelector('smart-slider').value;  
           }  
           else if (selectedTabItem.label.toLowerCase().indexOf('textbox') > -1) {  
             document.getElementById('outputTab').innerHTML = selectedTabItem.querySelector('smart-multiline-text-box').value;  
           }  
         }  
       });  
     }  
   }  
 }  


Live Example in Stackblitz: https://stackblitz.com/edit/github-m7vjva-qamazf.



Angular, HTML Elements, Javascript, Web Components
, , , , , , ,

Leave a comment

Define a Custom Element

In this post, we will show you how to define a Custom Element with Smart Framework. We will create a Material Color Picker custom element.

1. Define the Custom Element. To define a new custom element with Smart Framework, we need to call the Smart function with two parameters - the tag name and the Class with the logic.

Smart('smart-colors', class SmartColors extends Smart.BaseElement {  
}


2. Smart Framework gives us useful things like Templates, Data Binding, Typed Properties, Lifecycle callbacks, Event Handling. Read more about this https://www.htmlelements.com/docs/base-element/. In our Custom Element, we will use some of these features. We will use the 'ready' lifecycle callback. It is invoked once, when the element is attached for first time. We use this function to create and initialize the custom element. The 'properties' definition includes a property called 'color'. This property has default value - '#fff' and its type is 'string'. This means that when you try to set a 'bool', 'date', 'numeric' value, the element will throw an error with 'Invalid property type'. To raise the 'change' event, we use the '$.fireEvent' method.

3. The full code of our custom element is below
  // Define Custom Element
Smart('smart-colors', class SmartColors extends Smart.BaseElement {  
  // Declare properties
  static get properties() {  
    return {
      'color': 
        {
           value: '#fff',
           type: 'string'
        }
    };
  }
   
  // Ready is called when the element is in the DOM.
  ready () {
    const that = this;
    
    that._renderGrid();
    that._addHandlers();
  }
   
  // Renders the Color Panel.
  _renderGrid() {
    const that = this;
    const labelsAndPaletteContainer = document.createElement('div');

    that._renderShades();
    that._renderColorPalette();
    that._renderColorLabels();

    labelsAndPaletteContainer.classList = 'smart-labels-and-palette'
    labelsAndPaletteContainer.appendChild(that._colorLabelsContainer);
    labelsAndPaletteContainer.appendChild(that._paletteContainer);
    that.appendChild(labelsAndPaletteContainer);
  }
 
  // Rneders all colors.
  _renderColorPalette() {
    const that = this;
    const colorsArray = [
      ['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000'],
      ['#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162'],
      ['#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff'],
      ['#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea'],
      ['#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe'],
      ['#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff'],
      ['#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea'],
      ['#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4'],
      ['#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5'],
      ['#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853'],
      ['#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17'],
      ['#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00'],
      ['#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600'],
      ['#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00'],
      ['#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00'],
      ['#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00'],
      ['#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723'],
      ['#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121'],
      ['#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238'],
    ]
    const paletteContainer = document.createElement('div');

    for (let index = 0, length = colorsArray.length; index < length; index++) {
      const currentRow = colorsArray[index];
      const currentUl = that._renderRow(currentRow, 'smart-color-cell', false);

      paletteContainer.appendChild(currentUl);
    }

    paletteContainer.className = 'smart-palette';
    that._paletteContainer = paletteContainer;
  }
  
  // Renders all shades.
  _renderShades() {
    const that = this;
    const shadesContainer = document.createElement('div');
    const shadesArray = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A 100', 'A 200', 'A 400', 'A 700'];
    const shadesRow = that._renderRow(shadesArray, 'smart-shade-cell', true);

    shadesContainer.className = 'smart-shades';
    shadesContainer.appendChild(shadesRow);
    that.appendChild(shadesContainer);
  }

  _renderColorLabels() {
    const that = this;
    const colorLabelsContainer = document.createElement('div');
    const colorLabelsArray = ['Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo', 'Blue', 'Light Blue', 'Cyan', 'Teal', 'Green', 'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange', 'Deep Orange', 'Brown', 'Grey', 'Blue Grey'];
    const colorLabelsColumn = that._renderRow(colorLabelsArray, 'smart-color-label', true);

    colorLabelsContainer.className = 'smart-color-labels';
    colorLabelsContainer.appendChild(colorLabelsColumn);
    that._colorLabelsContainer = colorLabelsContainer;
  }
  
  // Renders a single row of colors.
  _renderRow(array, cellClass, addInnerHtml) {
    const ul = document.createElement('ul');

    for (let index = 0, length = array.length; index < length; index++) {
      const currentElement = array[index];
      const li = document.createElement('li');

      if (addInnerHtml) {
        li.innerHTML = currentElement;
      }
      else {
        li.style.background = currentElement;
        li.setAttribute('data-color', currentElement);
      }

      li.className = cellClass;

      ul.appendChild(li);
    }

    return ul;
  }
  
  // Fires a 'change' event when a color is selected.
  _addHandlers() {
    const that = this;

    const cells = that.querySelectorAll('.smart-color-cell');

    for(let i = 0; i < cells.length; i++) {
      const  cell = cells[i];

      cell.addEventListener('click', function() {
        that._currentColorHex = event.target.getAttribute('data-color');
        that._currentColorRgb = event.target.style.background;
        that.color = that.getColor().hex.toString();
        that.$.fireEvent('change');
      });
    }
  }
 
  // gets the selected color.
  getColor() {
    const that = this;
    const rgb = that._currentColorRgb.match(/\d+/g);

    return {
      hex: that._currentColorHex.substring(1),
      r: parseInt(rgb[0]),
      g: parseInt(rgb[1]),
      b: parseInt(rgb[2])
    };
  }
});

See the Pen SMART HTML ELEMENTS by Boyko Markov (@boyko-markov) on CodePen.

HTML Elements, Javascript, Web Components


Leave a comment

TreeGrid and Grouping

Tree Grid, Grouping, Context Menus




The latest version of Smart HTML Elements brings important new features to our Smart Grid Web Component. It is now possible to display data hierarchies in the web component. The Grid allows you to display data as a combination of Tree and Grid. The Tree Grid mode has full support for data sorting, data filtering and data editing. The Grouping features allows you to group data by columns. The context menu feature allows you to quickly add a context menu functionality to the Grid.


Tree Grid

Tree Grid mode allows you to display hierarchical data in the Grid and make the component work like a hybrid between Tree and Grid.


grid custom element column template
Tree Grid

Virtual Tree Grid

In Virtual Mode, new rows are loaded on demand when you expand a row. This process repeats until the "leaf" property of the row is set to true.


Virtual Tree Grid

Virtual Tree Grid Pagination

With Pagination enabled, Root rows are loaded on demand when the current page is changed. Sub Rows are loaded when a treegrid row is expanded.

grid custom element column template

Virtual Tree Grid Pagination

Grid Grouping

Grouping enables you to group the component by one or multiple columns. The grouping styling is customizable through CSS Variables.


Grid GroupBy Grouping

Grid Grouping Grouping Styling

Grid Context Menu



Context Menu Grid Context Menu
HTML Elements, Javascript, Smart Grid
, , ,

Leave a comment

New Grid Features

Newest features in the Grid




HTML Elements, Smart Grid


Leave a comment

Lazy Initialization of Web Components

This post shows how to create a Grid Web component and initialize it from a DIV tag

The next version ver3.1.0 of Smart HTML Elements will introduce an alternative way to create a Web Component on demand from an existing HTML Element.

Let's look at the sample below. In the 'index.htm' web page code, we see a HTMLDIVElement(DIV tag) with id="grid". We will use that HTML element to create a new Grid Web Component instance.

<!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title>Grid Lazy Load Demo</title>  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />  
   <link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />  
   <link rel="stylesheet" type="text/css" href="../../../styles/demos.css" />  
   <link rel="stylesheet" type="text/css" href="../../../styles/common.css" />  
   <link rel="stylesheet" type="text/css" href="styles.css" />  
   <script type="text/javascript" src="../../../scripts/common.js"></script>  
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>  
   <script type="module" src="index.js">  
   </script>  
 </head>  
 <body>  
   <div id="grid"></div>  
 </body>  
 </html>  


The 'index.js' file is defined as a Javascript Module. In that module our grid web component is created on window.onload, within a function called 'init()'. That is achieved by calling the Smart.Grid function and passing as a first argument the 'id' of the DIV tag and as a second argument the initialization object with the Grid web component's dataSource, columns and other configuration options. As a result, our DIV tag is replaced with a 'smart-grid' tag and a Grid is displayed.

That approach is useful, when we want to update an existing application with minimum changes or to create a Smart Web Component on demand with ES6 code.

import "../../../source/smart.elements.js";  
import "../../../scripts/data.js";  
 
document.readyState === 'complete' ? init() : window.onload = init;  
 function init() {  
   const grid = new Smart.Grid('#grid', {  
     dataSource: new Smart.DataAdapter(  
     {  
       dataSource: Data,  
       dataFields:  
       [  
         'id: number',  
         'firstName: string',  
         'lastName: string',  
         'productName: string',  
         'available: bool',  
         'quantity: number',  
         'price: number',  
         'total: number'  
       ]  
     }),      
     columns: [  
     {  
       label: 'First Name', dataField: 'firstName'  
     },  
     { label: 'Last Name', dataField: 'lastName' },  
     { label: 'Product', dataField: 'productName' },  
     { label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },  
     { label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },  
     { label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }  
     ]  
   });  
 }  
HTML Elements, Javascript, Web Components
, , ,

Leave a comment

Chart Custom Element Released

Best Chart Custom Element has just arrived

The latest version of Smart HTML Elements, brings a full featured Chart Custom Element with more than 30 different Data Visualization options. The Chart Types supported are listed: Chart Types.

Best Chart Custom Element

Our Chart Custom Element is written in JavaScript and CSS. It does not depend on any other third-party scripts. The rendering is achieved with SVG and HTML5 canvas. The Chart works well on mobile browsers and is the most feature-complete chart available in the web components world.
Data displayed on the Chart can be formatted in multiple different ways. For example, the charting element has a property called 'formatSettings' with the following data formatting options.

  • decimalSeparator - character used as a decimal separator. If not specified, the default separator is '.'
  • thousandsSeparator - character used as thousands separator. Default value is ','
  • decimalPlaces - number of digits after the decimal separator. Default value is 2 for floating point numbers.
  • negativeWithBrackets - boolean which specifies whether to display negative numbers in brackets. Default value is false.
  • prefix - any string which will be added as a prefix. Default value is empty.
  • sufix - any string which will be added as a sufix. Default value is empty.
  • dateFormat - optional date format string. This property is applicable only when displaying Date objects.




The image below illustrates the Axes supported by the custom element. Smart.Chart has two main types of axes - valueAxis and xAxis. Typically the valueAxis represents the vertical axis in the chart although you may choose to rotate the axes and in this case the valueAxis will be displayed horizontally.Chart Custom Element Axes

Smart.Chart also ships with 32 built-in color schemes which are used to automatically set colors for different series. You can change the color scheme by setting the colorScheme property of the chart. The available value are from 'scheme01' to 'scheme32'. By setting its 'theme' property, users can Data Visualize their graphics in 'Light' and 'Dark' mode. Smart.Chart is based on: jqxChart.

We invite you to look at our Chart Custom Element demos: Chart overview
HTML Elements, Javascript, Web Components


Leave a comment

Binding to Row, Cell and Column Events in Grid Web Component

This post shows how to bind to the Grid Web Component events. The code below initializes the Grid instance and binds to the 'click' event. Within the event handler, we can get details about which part of the Grid was clicked - Cell, Row or Column. This is achieved by utilizing the 'event.path' array. It is also important to note that each Data Grid Column has 'data-field' attribute and each Row has 'data-id' attribute. The data source, which is used in the example is available in the 'data.js' file from the download package.

 Smart('#grid', class {  
      get properties() {  
           return {  
                dataSource: new Smart.DataAdapter(  
                {  
                     dataSource: getCountriesData(),  
                     dataFields:  
                     [  
                          'ID: number',  
                          'Country: string',  
                          'Area: number',  
                          'Population_Urban: number',  
                          'Population_Rural: number',  
                          'Population_Total: number',  
                          'GDP_Agriculture: number',  
                          'GDP_Industry: number',  
                          'GDP_Services: number',  
                          'GDP_Total: number'  
                     ]  
                }),  
                columns: [  
                     'Country',  
                     'Area',  
                     'Population_Rural',  
                     'Population_Total',  
                     'GDP_Total'  
                ]  
           }  
      }  
 });  
 window.onload = function() {  
  grid.addEventListener('click', function(event){  
     const path = event.path;  
     let cell = null;  
     let row = null;  
     let column = null;  
     for(let i = 0; i < path.length; i++) {  
       const node = path[i];  
       if (node.nodeName === 'SMART-GRID-CELL') {  
         cell = node;  
       }  
       if (node.nodeName === 'SMART-GRID-ROW') {  
         row = node;  
       }  
       if (node.nodeName === 'SMART-GRID-COLUMN')      {  
         column = node;  
       }  
     }  
     if (row) {  
       alert(row.getAttribute('data-id'));  
     }  
     if (column) {  
       alert(column.getAttribute('data-field'));  
     }  
     if (cell) {  
       alert(cell.innerText);  
     }  
  });  
 }  
Smart Grid, Web Components
,

Leave a comment

AutoComplete Input Custom Element also known as Typeahead

The newest version of our framework marks the availability of a new AutoComplete Input tag. We needed such lightweight component for the purposes of our Grid web component.
There, it is used as an inline cell editor. You can check it out here: grid-editing-cell-auto-complete.

Here is how the web component looks like when you add it to your web page:

Auto Complete Input

All you need to do is to add a reference to smart.elements.js, smart.default.css and type the following:

 <smart-input data-source="[South America, North America, Asia, Africa, Europe]"></smart-input>  
Uncategorized
, , , , , , , , , ,

Leave a comment

Extend Elements with Behaviors

Our Web Components library has a feature, which allows you to dynamically extend a Custom Element with additional behaviors. We call them Modules. To add a new module, you have to call the 'addModule' method. In this blog, we will show you how to create a new module, which adds a 'color' property to a Custom Element. We will call it 'ColorModule'.

class ColorModule  {
	 static get properties() {
		 const properties =
		 {
			 'color': {
				 value: 'red',
				 type: 'string',
				 observer: 'setColor'
			 }
		 }

		 return properties;
	 }

	ready() {
		this.ownerElement.$.root.style.color = this.color;
	}

	setColor(oldColor, color) {
		this.ownerElement.$.root.style.color = this.color;
	}
}

The 'ColorModule' defines a 'color' property. The default property value is 'red'. Whenever the 'color' property is changed, the 'setColor' method is invoked which applies the Color to the element.
The below code adds the Module to the 'smart-toggle'button' Custom Element.

window.Smart.Elements.whenRegistered('smart-toggle-button', function (proto) {
    proto.addModule(ColorModule, true);
});


Note that the second parameter is 'true'. This means that our 'ColorModule' will be added to all sub-classes of the 'smart-toggle-button' i.e 'smart-radio-button', 'smart-check-box' and 'smart-switch-button'. All these custom elements will have the 'color' property.
Usage example:

window.onload = function() {
    document.querySelector('smart-radio-button').color = "blue";		
}
HTML Elements, Javascript
, , , , , ,

Leave a comment

Get Caller JavaScript File Location

If you need to get the Path to the current Javascript file being executed, you can use this small function:
 const location = (function () {
                if (document.currentScript) {
                    let link = document.currentScript.src;
                    let lastIndex = link.lastIndexOf('/');

                    link = link.substring(0, lastIndex);

                    return link;
                }
 })();

In our code base, we use it to dynamically load Component dependencies.
HTML Elements, Web Components
, ,

Leave a comment

Grid with Very Large Data Set

One of the new additions to our Javascript Grid Web Component is the capability to load very large data sets. Example: Grid Large Data Set. In the example, we demonstrate how to load 50,000 rows and 1,000 columns. This can be achieved due to the built in Fast Data and User Interface virtualization. We create HTML Elements only for the View and update them while user scrolls. The Grid is also in unbound mode and the demo is created by using this code:

 Smart('#grid', class {
get properties() {
return {
appearance: {
showRowNumber: true
},
columnWidth: 100,
dataSource: new Smart.DataAdapter(
{
dataSource: 50000,
dataFields: 1000
}),
onCellRender(cell) {
cell.value = cell.row.index + '.' + cell.column.index;
}
}
}
}); 
 

To create it in unbound mode, we need to set the dataSource and dataFields properties to Numeric values which determine the Rows and Columns. The "onCellRender" callback function allows us to render cell values on demand when the cell is in the view. The Data in the example is Client Side data. If you have an application scenario, where you need to use larger data sets, our Grid offers a solution for that due through the Virtual Data Source. Check out: Grid Demos.
Smart Grid
, , , , , , , , ,

Leave a comment

Released ver. 2.3.0 of our Web Components

The new release includes major changes in the Grid web component and also bug fixes, visual style improvements in all components. The version can be downloaded from our Download page or you can install it through NPM npm i @smarthtmlelements/smart-core or npm i @smarthtmlelements/smart-elements

What's New:


  • Grid Filtering
  • Grid Column Menu
  • Grid Sort Custom Icons
Smart Grid
, , , , , , , , , ,

Leave a comment

Smart Web Components ver.2.2.0

The new release brings a lot of new things to our product.

  • Framework: Model-View Two-Way data bindings
  • Table Web Component - 100% Free Table replacement with Sorting and Data Binding capabilities.
  • Grid Rows Freeze
  • Grid ColumnsFreeze
  • Grid Columns Resize
Smart Grid, Web Components
, , ,

Leave a comment

DataGrid Cells Merge and Columns Crud Features

Cells Merge - allows you to span a cell through multiple rows or columns. To use this feature, you need to access a Grid cell, through the Grid's 'rows' array. Each row in the 'rows' array has 'cells' array. It allows you to access a cell and set options of that cell like: 'rowSpan', 'colSpan', 'backgroundColor', 'color', 'value', 'fontSize', 'fontWeight' and 'fontFamily'.


Example: https://www.htmlelements.com/demos/grid/merged-cells/.


Columns Crud - allows you to dynamically add, remove and update DataGrid columns. This is achieved through the DataGrid's 'columns' array which has javascript functions such as: 'push', 'pop', 'splice' for adding, removing and updating array items. Once any of these functions is called, the web component will automatically refresh itself to respond to the changes.


Example: https://www.htmlelements.com/demos/grid/dynamic-columns/.

Smart Grid
, , , , , , , , , , , , , , , ,

Leave a comment

A Curated List of Awesome Custom Elements & Web Components

You can check it here: https://htmlelements.github.io/awesome-custom-elements/.

Contributions are welcome!
Uncategorized

Leave a comment

New Grid Data Paging Options

With the new release of our Grid Web Component, we added additional Data Paging options. With the help of them, you can customize the Paging appearance and behavior.

- Pager can be displayed above and/or below the Grid.
- Pager Size selector position and visibility is optional.
- Pager Size selector options are customizable.
- Pager Summary position and visibility is optional.
- Pager buttons can be displayed as Icons or as Labels. You can also choose whether to display or not some of the buttons.
- Pager Navigation Input visibility is optional.

Take a look at the new Web demo online: https://www.htmlelements.com/demos/grid/paging-advanced/.
Angular, HTML Elements, Smart Grid
, , ,

Leave a comment

Happy New Year

<2019>Happy New Year

Uncategorized

Leave a comment

Smart HTML Elements Adds Native Angular Support

Angular and Web Components



Web Components is the future of reusable components development for modern and professional web applications. Smart HTML Elements represents a framework based on Javascript, HTML and CSS for building modern web-based applications optimized for PC and mobile devices. It provides fundamental capabilities like support for HTML Element extensions and inheritance, HTML Templates, Data Binding, Event handling and routing, property change notifications, device and browser compatibility detection and adjustments.

Read Full Article on: Smart HTML Elements Adds Native Angular Support
Angular, HTML Elements, Web Components
, , ,

Leave a comment

Grid Web Component

The newest release of Smart HTML Elements includes a Grid Web Component with the following features: Paging, Sorting, Sorting by multiple columns, Virtual Scrolling and Infinite Scrolling.

What is Paging?


Paging lets users view large sets of data in small chunks for faster loading and easier navigation

What is Sorting?


Sorting data by the columns ASC or DESC in the grid can be done by single or multiple columns.

What is Virtual Scrolling?


Virtual scrolling lets you scroll through data which is loaded on demand. In this scrolling mode, the total number of rows is known and data grids loads data while you scroll.

What is Infinite Scrolling?


Infinite scrolling is similar to virtual grid scrolling. In this mode, datagrids load new data when you reach the bottom of the Grid. The total number of data rows here is unknown.

What is Filtering?


The Grid enables you to display only those Grid records which meet specified criteria. To enable filtering, you need to set the filtering.enabled property to true.Updated: The latest release of our Grid Web Component, includes Row Resizing, Spreadsheet mode, Column Chooser, Excel-like Cells Selection, Cells Selection Dragging and Auto-Fill Values mode.Updated August-28-2019: The latest version now has Data Export to .xlsx, .pdf, .csv, .tsv, .html, .json and .xml.
HTML Elements, Smart Grid, Web Components
, , , , , ,

Leave a comment

Dropdown Button Custom Element

In this blog we are going to show you our DropDown Button custom element.

The DropDown button web component is a button element which when pressed opens a drop down list. The drop down list contain a set of selectable items. The list can be opened or closed with the help of arrow pointers on the right end of the button.

Drop Down Button Custom Element Features



Scrolling. When the button is pressed you can scroll through the elements of the dropdown list.

Dropdown Button Custom Element

Segmented button. The segmented dropdown button will show the current selected item and will not open the dropdown list when you press it. The dropdown list can be opened with the arrow in this case.

Open directions. The dropdown list can open below or above the button.

You can see an example here.
Smart ComboBox
, , , , , , ,

Leave a comment

Date Picker Custom Element

In this blog we are going to show you our Date Picker custom element.

The Date Picker web component allows you to pick a date with the help of a calendar component. The custom element can be used in cases when the user needs to pick or input the date. The date can be selected by clicking the calendar button and selecting the date from the calendar, or enter the date manually in the input text filed.

Date Picker Custom Element Features



An important feature of our Date Picker html tag is localization in different languages and time formats.

Date Picker Custom Element

The web component has built-in date parsing functionality and supports choosing a date in different formats.

Colors and theming. The background color and the text color of the items can be defined. You can also use the built in themes.

You can see an example here.
HTML Elements, Smart Calendar, Web Components


Leave a comment

ListBox Custom Element with Images

ListBox Custom Element with ImagesIn this blog we are going to show you our ListBox Custom Element with Images.

The ListBox web component is a drop down list of selectable items which can be scrolled up and down. The user can select an item of the list. The ListBox can also contain rows with complex items such as conversations.

The ListBox html tag supports images and icons on the left of the items. The images can also be pictures.

ListBox Custom Element with Images Features



Scrolling. The web component supports scrolling of the items.

ListBox Custom Element with Images

Drag and drop. You can move items between listboxes by dragging an item from one of the listsboxes and dropping it on another.

Colors and theming. The background color and the text color of the items can be defined. You can also use the built in themes.

Animation. By enabling animation you can see a nice effect when clicking on an item from the listbox.

You can see an example here.
HTML Elements, Smart ListBox
, , , , ,

Leave a comment

Grid Infinite Scroll

For large data sets or when the exact data records count cannot be determined in advance, you can supply data to the Grid while you scroll when the user reaches the bottom of the grid. In this case, the Grid's scrolling is called infinite scrolling mode. The scrollbar reflects the currently loaded amount of data. When new data records are supplied, the scroll bar re-adjusts its size and allows you to scroll and view the newly loaded data records. To illustrate the infinite scrolling functionality of Smart.Grid, we prepared this demo:

Demo: Grid Infinite Scroll
HTML Elements, Smart Grid, Web Components
, , , ,

Leave a comment

Vertical Menu Custom Element

In this blog we are going to show you our Vertical Menu Custom Element.

The menu web component is used very frequently in user interfaces. It enables the selection of an item from a list of items. The Vertical Menu HTML tag is a menu custom element which instead of horizontally opens vertically. This is useful for example in cases where the menu has a long list of items or the sub menus have long lists. To make the menu web component appear vertically you have to set the mode property.

Vertical Menu Custom Element Features



Animation. When you enable animation you can see a nice effect when clicking an item from the menu or when the sub menus appear or disappear.

Vertical Menu Custom Element

Images. You can set images the left of the item of the Vertical Menu.

Colors and theming. The background color and the text color of the items can be defined. You can also use the built in themes.

Open direction. The sub menus can be opened on the left or on the right of the menu items.

You can see an example here.
HTML Elements, Web Components
, , , ,

Leave a comment

Checkbox Custom Element

In this blog we are going introduce you to our CheckBox Custom Element.

The CheckBox Web Component is a kind of button which is usually used to enable the selection of different choices. It represents a box which can be checked, unchecked and undetermined. The different states can be changed by clicking with the mouse over the checkbox.

Checkbox Custom Element Features



The CheckBox HTML tag supports four states: checked, unchecked, undetermined and disabled.

CheckBox Custom Element

The CheckBox custom element comes with Light and Dark themes.

It also enables fluid design where the width can be set in percentages.

You can see an example here.
HTML Elements, Web Components
, , , ,

Leave a comment

Linear Progress Bar custom element

In this blog we will introduce our Linear Progress Bar custom element.

The ProgressBar Web Component indicates the progress of an operation. It is very often used as an indicator when a file or content is being loaded. It can also be used as a refresh indicator.

The linear progress bar represents a line which shows the progress on a scale between 0 and 100.

Linear ProgressBar Custom Element Features



Determinate. When the Linear Progress Bar is set to determinate it goes from 0 to 100 following the progress of the operation without going back.

Linear Progress Bar Custom Element

Indeterminate. When the Progress Bar Web component is set to indeterminate it shows a line going from 0to 100 repeatedly.

The ProgressBar HTML tag comes with a Light and Dark themes.

You can see an example Linear Progress Bar.
HTML Elements, Web Components
, , ,

Leave a comment

Calendar Custom Element

In this blog we will introduce our Calendar custom element.

The Calendar Web Component enables you to visualize and select the year, month and date. The years and the months can be easily changed by navigating the calendar from the title bar. The selected day is indicated by a colored circle.

The calendar is one of the basic custom elements used when you need to change or select dates.

Calendar Custom Element Features



When you select a date from the HTML Calendar element the current date stays indicated by a filled circle with paler color.

Calendar Custom Element

If you click on the year in the title bar there appears a list with years below it. You can select a year from the list.

Likewise, if you click on the month in the title bar there appears a list with months below it. You can select a month from the list.

The Calendar Web component is responsive and mobile ready.

In addition, the text and the back ground colors can be changed.

You can see an example here.
HTML Elements, Smart Calendar, Web Components
, , ,

Leave a comment

ComboBox Custom Element

In this blog we will introduce our Combobox custom element.

The ComboBox is one of the basic web components used widely in the UI part of applications in order to facilitate the selection of items. It represents a list of elements displayed in a drop-down and an input text field where information can be entered. The elements from the list can be selected. Also the user can search for a specific element.

Combobox Custom Element Features



Our HTML Combobox Element supports multiple selection. With the MultiSelect option the user can select multiple elements from the drop down list. The selected elements will appear in the text input field.

Combobox Custom Element

The Open direction of the list of elements can be above, below or centered.

The web component enables also auto-complete. With the auto-complete option the element matching the text in the input filed will be shown on top.

Checkbox on the left of the elements in the list is also supported. This facilitates the selection of multiple items.

The elements in the drop down list can be aligned horizontally or vertically. The horizontal alignment can be left or right and the vertical top or bottom.

In addition, the text and the back ground colors can be changed.

You can see an example here.
HTML Elements, Smart ComboBox, Web Components
, , , ,

Leave a comment

Grid Custom Element

The latest release of Smart Custom Element includes an initial version of a Grid Web Component.

Demos: https://www.htmlelements.com/demos/grid/.

Docs: https://www.htmlelements.com/docs/grid/.
Smart Grid, Web Components
, , , ,

Leave a comment

Context Menu Custom Element

In this blog we will introduce our Context Menu Custom Element.

The Menu Web Component is used to show different choices grouped in a hierarchical structure. It is one of the most frequently used HTML interface elements. The Context Menu can be used when you want to change the menu items based on the state of your application.

Context Menu Custom Element Features



Our Contextual Menu Web Component supports images. The images can be positioned on the left of the text of the menu items. In addition to images you can also add check boxes.

Menu elements which are not relevant in the current moment can be removed.

In addition you can disable items which need certain condition in order to be active.

Animation can also be enabled. When you enable animation you can see a nice fading effect.

Our HTML Context Menu can also be shown as minimized.

You can see an example here.
HTML Elements, Smart Context Menu, Web Components
, , , , ,

Leave a comment

Web Components 1.2.0

We are glad to share with you that our Team tested Smart Custom Elements with the latest version of Web Components and we did not find any issues. We updated all our demos to use only ES6 code. This does not mean that you would not be able to use our product with older browsers. You can still use the transpiled ES5 version of the files, if you target IE11 or other browsers without ES6 and CSS Variables support.
HTML Elements
, ,

Leave a comment

Smart Custom Element

Smart Custom Element provides a set of useful API, Data Binding, Templates, Device Agnostic Event Handling, Resize handling, Style Change Notifications, Property and Attribute Change Notifications, Property Value and Type validation, Localization, Lifecycle callback functions and much more. Our framework allows you to easily build Custom HTML Elements. Custom Elements are the web platform's native solution for component-based development. With Custom Elements, you get reusable HTML tags that can be used just like the browser’s built-in native html elements, or break your app up into small pieces, making your code cleaner and easier to maintain.

For more information, please visit: https://www.htmlelements.com/docs/base-element/
GitHub repo: https://github.com/HTMLElements/smart-custom-element
NPM: https://www.npmjs.com/package/@smarthtmlelements/smart-custom-element

HTML Elements
, ,

Leave a comment

Smart Tabs Custom Element

Smart Tabs is a Tabs Custom HTML Element that make it easy to explore and switch between different views, part of the Smart HTML Elements. Tabs can be paired with components like top app bars, or nested in components like cards and sheets. Users can navigate between tabs by tapping a tab, or by performing a swipe gesture over content



WebComponents.org: https://www.webcomponents.org/element/HTMLElements/smart-tabs.
NPM Installation: Smart Tabs
HTML Elements, Smart Tabs
, , , , , , , , ,

Leave a comment

Smart Calendar

Smart Calendar represents a Calendar Custom Element, which you can use to pick a Date interactively. It is built with Javascript, CSS and HTML. The Calendar does not depend on any third-party libraries. Smart Calendar

Smart Calendar NPM package has been publishte: https://www.npmjs.com/package/@smarthtmlelements/smart-calendar

GitHub repo: https://github.com/HTMLElements/smart-calendar

WebComponents: https://www.webcomponents.org/element/htmlelements/smart-calendar
HTML Elements, Smart Calendar
, , , , , ,

Leave a comment

Smart Accordion

Smart Accordion is a custom element which contains expandable panels. Each panel has Header and Content. In the Header and Content, you can put any HTML or HTML Element. Our Smart Accordion custom element now has a GitHub repository, Bower(type bower install htmlelements/smart-accordion) and NPM packages and is also available on the WebComponents.org website - smart-accordion.

HTML Elements, Smart Accordion
, , , , , , ,

Leave a comment

Smart Button

Smart Button is a simple custom element which represents a Button. It can contain any content like Image, Text or any HTML. Our Smart Button custom element now has a GitHub repository, Bower(type bower install htmlelements/smart-button) and NPM packages and is also available on the WebComponents.org website - smart-button.

HTML Elements, Smart Button
, , , , , , , ,

Leave a comment

About Smart HTML Elements



What is Smart HTML Elements?



Smart HTML Elements represents a UI framework based on Javascript, HTML 5 and CSS 3 for building responsive web-based applications. Smart HTML Elements includes more than 30 UI components. Some of them are: Sliders, Tabs, Tank, Gauge, Buttons, Lists, Dropdowns, Dialog Window, Toast, etc.
the UI components are designed from ground-up and based on a powerful common core. The framework core provides powerful features like support for HTML Element extensions and inheritance, HTML Templates , Data Binding, Event handling and routing, property change notifications, device and browser compatibility detection and adjustments.



HTML Elements

Leave a comment