Hi paul,
Thank you for contacting us!
Let me answer your enquiries:
1. Can you share a code example of this case, because I was unable to reproduce this case.Also check the console for errors.
2. You can use the footerTemplate property of the smart-window to overwrite the default one and create custom one. I
have prepared a little code example on how to achieve this. I used the event ‘open’ of the smart-card-view.
More about the footerTemplate you can check in the smart-window API here :https://www.htmlelements.com/docs/window-api/
//In you JS File:

window.onload = function ( ){
    const cardview = document.querySelector('smart-card-view');
        cardview.addEventListener('open', function (event) {
        const window = document.querySelector('smart-window')
        window.footerTemplate = 'footerTemplate'
        let id = parseFloat(window.label[0])
        let deleteBtn= document.getElementById('deleteButton')
        deleteBtn.addEventListener('click', () =>{
          window.close()
          removeRecord(id)
        })
    });
    function removeRecord(id){
        cardview.removeRecord(id-1)
      }
}

And in your HTML file:

    <smart-card-view id="cardView"></smart-card-view>
    <template id='footerTemplate'>
        <smart-button id ='deleteButton'> Delete</smart-button>
      </template>

Note that I have used this demo for base : https://www.htmlelements.com/demos/cardview/deferred-scroll/
3.This on will be similar to the previous one:
//In your JS file:

window.onload = function ( ){
    const cardview = document.querySelector('smart-card-view');
        cardview.addEventListener('open', function (event) {
        const window = document.querySelector('smart-window')
        let okBtn = window.querySelector('.ok .smart-button')
            console.log(okBtn)
        okBtn.addEventListener('click', function (){
            alert(okBtn.textContent)
        })
    })
}

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

Hi paul,
Thank you for contacting us, again!
After some testing I was able to find out why the icons are not displayed in your project.ViewEncapsulation defines template and style encapsulation options available for component’s.
Just add the following code snippet to you app.componetn.ts file:

import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CardViewComponent, Smart } from 'smart-webcomponents-angular/cardview';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

Hi paul,
Thank you for contacting us, again!
For your fist question I forgot to mention in my previous reply that you have to place the whole template element for the window footer in your
index.html file after <app-root> tag.
And for your second question I have made yet another code snippet similar to the last one but with a little differences and we will need to add another click event to the SmardCardView component.
//In your app.component.html file:

<!-- Note the new click event -->
smart-card-view
(open)="onOpen($event)"
[coverField]="coverField"
(click)="newCardEvent($event)"
[editable]="true"
[titleField]="titleField"
[allowDrag]="true"
[addNewButton]="true"
[dataSource]="dataSource" [columns]="columns" #cardview id="cardView"></smart-card-view>

//In your index.html file:

<!-- Its important to add the templates after <app-root> -->
  <app-root></app-root>
  <template id='footerTemplateDelete'>
    <smart-button id ='deleteButton'> Delete</smart-button>
  </template>
  <template id='footerTemplateNew'>
    <smart-button id ='newBtn'> Your New Button</smart-button>
    <smart-button id ='anotherBtn'> Another Button</smart-button>
  </template>

//In your app.component.ts file:

   onOpen($event:CustomEvent) {
            // event handling code goes here.
        const window = document.querySelector('smart-window')
        if(($event.target as Element).classList.contains('smart-card-view')){
            window.footerTemplate = 'footerTemplateDelete'
            let id = parseFloat(window.label[0])
            let deleteBtn= document.getElementById('deleteButton')
            deleteBtn.addEventListener('click', () =>{
              window.close()
              this.removeRecord(id)
            })
        }
    }
    newCardEvent($event:CustomEvent) {
       // event handling code goes here.
        let targetElement = ($event.target as Element).classList
        const window = document.querySelector('smart-window');
        if(targetElement.contains('smart-add-new-button')){
             window.footerTemplate = 'footerTemplateNew';
             let anotherBtn= document.getElementById('anotherBtn')
             anotherBtn.addEventListener('click', () =>{
               console.log('Another Button in the window footer was clicked')
             })
         }
     }
    removeRecord(id):void{
      console.log(typeof id)
      this.cardview.removeRecord(id-1)
    }
 

I know its a long post but I wanted to be comprehensive as possible.
Let me know if that works for you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

Hi paul,
Glad to hear that the suggestions have worked!
I would like to answer you question regarding the window field values and replacing the smart-input elements with a drop-down instead.
The code snippet below which is pretty self explаnatory will give you example how to achieve both things.

    onOpen($event: CustomEvent) {
        // event handling code goes here.
        const window = document.querySelector('smart-window')
        let allInputValues = window.querySelectorAll('smart-input')
        for(let i = 0; i < allInputValues.length; i++){
            console.log(allInputValues[i].getAttribute('value'))
        }
        if (($event.target as Element).classList.contains('smart-card-view')) {
            window.footerTemplate = 'footerTemplateDelete'
            let dropdownContainer: Element = window.querySelector('smart-input'),
                inputValue = dropdownContainer.getAttribute('value'),
                dropdown = document.createElement('smart-drop-down-list');
            dropdown.value = inputValue;
            dropdown.placeholder = inputValue;
            let dropdownDataSource: string[] = [
                "Your Dropdwon List Item 1 ",
                "Your Dropdwon List Item 2",
                "Your Dropdwon List Item 3",
                "Your Dropdwon List Item 4"
            ];
            dropdown.dataSource = dropdownDataSource
            dropdownContainer.replaceWith(dropdown)
            let id = parseFloat(window.label[0])
            let deleteBtn = document.getElementById('deleteButton')
            deleteBtn.addEventListener('click', () => {
                window.close()
                this.removeRecord(id)
            })
        }
    }

And one additional thing is to add the following CSS styles in order the drop-down element to match the styles of the other input elements in the window.

.smart-drop-down-list{
    width: 100%;
    --smart-surface: white;
}

Let me know if that works for you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

Hi paul,
Thank you for contacting us!
For your first question I have another code snippet that worked for me. If it doesn’t for you it will be best to create a code example for us.
1. Code snippet:
//In the onOpen event Handler

    onOpen($event: CustomEvent) {
        // event handling code goes here.
        const window = document.querySelector('smart-window')
        let dateInput = window.querySelectorAll('input')
        console.log(dateInput[2].value)
        // outputed format of the date is MM/DD/YY
        //rest of the function code

And for your second question this is the default functionality of the checkbox but you can use the native method blur() to disable this appearance like so:

    const checkbox = document.getElementById('checkBox')
    checkbox.addEventListener('click', ()=>{
        if(!checkbox.checked){
            checkbox.blur()
        }
     

Let me know if that works for you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

Hi Paul,
Thank you for contacting us and excuse me for the late reply.
Here are my suggestions for your questions:
1.I have aa code snippet on how to use the formatFunction:
//In the columns array

        { label: 'First Name', dataField: 'firstName', icon: 'firstName' ,
            formatFunction: function (settings: { value: any; template: string; }) {
                    const value = settings.value;
                    let className='not-visible-input';
                    settings.template = <code><div style=&quot;display:'none';&quot; class=&quot;${className}&quot;>${value}</div></code>;
                }
        },

//And in you app.component.css file add the following class

.not-visible-input{
    display: none;
}

2.Can you give a bit more context what exactly you want to achieve if you want to display alert message you can do so by binding to the ‘change’ event of the input like so:

  dateInput[2][2].addEventListener('change', ()=>{
            // your validation
            alert('Validation error')
        })

3. For this one maybe it will be best to create a code example for us because when I create new card it is displayed and I also advice you to check the following demo: https://www.htmlelements.com/demos/cardview/server-side-crud/
4.And for this one I have another code snippet for you:
//In your app.component.ts file

    ngAfterViewInit() {
        // afterViewInit code.
        this.init();
    }
    init() {
            if(this.dataSource.length <= 1){
                window.onload = () => {
                    let oneCard = document.querySelector('.smart-card') as HTMLElement
                    oneCard.style.width = '30%'
                }
            }
    }

Let me know if that works for you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/