u2ui 1.0.0

package/el/ico/tests/util.js

@@ -0,0 +1,110 @@
+import 'https://agsek.github.io/monoto-fonts-ofl/vendors/fontkit.js';
+
+
+const fontUrls = {};
+for (let sheet of document.styleSheets) {
+    for (let rule of sheet.rules) {
+        if (rule instanceof CSSFontFaceRule) {
+            let family = rule.style.getPropertyValue('font-family');
+            family = familyTrim(family);
+            let fullSrc = rule.style.getPropertyValue('src');
+            let src = fullSrc.match(/url\(([^)]*)\)/)[1].replace(/^"/,'').replace(/"$/,'');
+            fontUrls[family] = src;
+        }
+    }
+}
+
+function familyTrim(family){
+    return family.trim().replace(/^['"]/,'').replace(/['"]$/,'');
+}
+function fontToUrl(family){
+    family = familyTrim(family);
+    return fontUrls[family];
+}
+
+document.fonts.forEach(function(font){
+    console.log(font)
+});
+
+window.ligaturesFromFamily = async function(family){
+    var url = fontToUrl(family)
+    return await getLigatures(url);
+}
+
+
+
+
+async function getLigatures(fontUrl){
+    var font = await getFontObject(fontUrl);
+    let lookupList = font.GSUB.lookupList.toArray();
+    let lookupListIndexes = font.GSUB.featureList[0].feature.lookupListIndexes;
+    const ligatures = {};
+    lookupListIndexes.forEach(index => {
+        let subTable = lookupList[index].subTables[0];
+        let leadingCharacters = [];
+        if (!subTable.coverage.rangeRecords) return;
+        subTable.coverage.rangeRecords.forEach((coverage) => {
+            for (let i = coverage.start; i <= coverage.end; i++) {
+                let character = font.stringsForGlyph(i)[0];
+                leadingCharacters.push(character);
+            }
+        });
+        let ligatureSets = subTable.ligatureSets.toArray();
+        ligatureSets.forEach((ligatureSet, ligatureSetIndex) => {
+            let leadingCharacter = leadingCharacters[ligatureSetIndex];
+            ligatureSet.forEach(ligature => {
+                let character = font.stringsForGlyph(ligature.glyph)[0];
+                if (character==null) return;
+                let characterCode = character.charCodeAt(0).toString(16).toUpperCase();
+                let ligatureText = ligature.components.map(x => font.stringsForGlyph(x)[0]).join('');
+                ligatureText = leadingCharacter + ligatureText;
+                ligatures[ligatureText] = {
+                    leadingCharacter
+                }
+            });
+        });
+    });
+
+    lookupListIndexes.forEach( index => {
+        let lookupObject = lookupList[index];
+        console.log(`lookup ${index}:`, lookupObject);
+
+        let subtable = lookupObject.subTables[0];
+        let ligatureSets = subtable.ligatureSets.toArray(); // note the .toArray() here too
+        let ligatureSet_1 = ligatureSets[0];
+        console.log(`ligature sets:`, ligatureSet_1);
+
+        let ligature_1 = ligatureSet_1[0];
+        console.log(`first ligature:`, ligature_1);
+
+        let target = ligature_1.components;
+        console.log(`targets: `, target.map(gid => font.getGlyph(gid)));
+
+        let replacement = ligature_1.glyph;
+        console.log(`replacement: `, font.getGlyph(replacement));
+    });
+
+    return ligatures;
+}
+function getFontObject(fontPath) {
+    return  new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', fontPath);
+        xhr.responseType = 'arraybuffer';
+        xhr.onload = function() {
+            if (this.readyState === 4 && this.status === 200) {
+                var fkBlob = this.response,
+                    fkBuffer = new Buffer(fkBlob),
+                    fontInfo;
+                fontInfo = fontkit.create(fkBuffer);
+                resolve(fontInfo);
+            } else {
+                reject(Error(xhr.statusText));
+            }
+        };
+        xhr.onerror = function(error) {
+            reject(Error('An error occured: ' + error.message));
+        };
+        xhr.send();
+    });
+}

package/el/input/README.md

@@ -0,0 +1,39 @@
+# <u2-input> - element
+Input elements (very beta)
+
+## Usage
+
+```html
+<label>
+    <u2-input>
+        <span slot=start>☎</span>
+        <input type="tel">
+        <span slot=end>×</span>
+    </u2-input>
+</label>
+```
+
+```css
+u2-input:focus-within {
+    border-color: green;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/input/input.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/input/input.min.js" type=module async></script>
+```
+
+## Demos
+
+[formParticipation.html](http://gcdn.li/u2ui/u2@main/el/input/tests/formParticipation.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/input/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/input/tests/test.html)  
+
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥

package/el/input/input.css

@@ -0,0 +1,35 @@
+
+u2-input[type="cycle"] {
+    display:inline-grid;
+    width:auto;
+    line-height:1;
+
+    > label {
+        all:unset;
+        grid-area: 1 / 1 / 1 / 1;
+        position:relative;
+        opacity:0;
+        display:grid;
+        place-content: center;
+
+        &:first-child {
+            z-index:1;
+        }
+
+        &:has(:checked) {
+            z-index:0;
+            opacity:1;
+            & + label {
+                z-index:2;
+            }
+        }
+
+        & [type="radio"] {
+            position:absolute;
+            inset:0;
+            appearance: textfield;
+            opacity:0;
+        }
+    }
+}
+

package/el/input/input.js

@@ -0,0 +1,331 @@
+// See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
+
+const types = {
+    'text': {
+        fallback: '<input type=text>',
+        input: `<slot name=start></slot><slot></slot><slot name=end></slot>`,
+    },
+    'stepper': {
+        fallback: '<input type=number>',
+        input: `
+            <slot name=start></slot>
+            <button part=button class="down">
+                <u2-ico icon=minus inline>-</u2-ico>
+            </button>
+            <slot></slot>
+            <button part=button class="up">
+                <u2-ico icon=plus inline>+</u2-ico>
+            </button>
+            <slot name=end></slot>`,
+        css: `
+            ::slotted(input) {
+                text-align:center;
+                appearance:textfield;
+            }
+            :host {
+                inline-size: 6em;
+            }
+            `,
+        init({shadow}) {
+            shadow.querySelector('.up').addEventListener('click', ()=> this.realInput.stepUp() );
+            shadow.querySelector('.down').addEventListener('click', ()=> this.realInput.stepDown() );
+        }
+    },
+    'checkbox': {
+        fallback: '<select><option value="">off</option><option value=on>on</select>',
+        input: `
+            <slot name=start></slot>
+            <input type=checkbox id=checkbox>
+            <slot name=end></slot>`,
+        css: `#input { border:0; }`,
+        init({shadow}) {
+            setTimeout(()=> {
+                const real = this.realInput;
+                const checkbox = shadow.querySelector('#checkbox');
+                checkbox.addEventListener('change', e => {
+                    real.value = checkbox.checked ? real.lastElementChild.value : real.firstElementChild.value;
+                });
+                checkbox.checked = real.value === real.lastElementChild.value;
+            });
+        }
+    },
+    'cycle': {
+        fallback: '',
+        input: `<slot style="display:grid;"> </slot>`,
+    },
+    'file': {
+        fallback: '<input type=file multiple>',
+        input: `
+            <div id=droparea>
+                <button id=browse>
+                    Durchsuchen...
+                    <small id=num></small>
+                </button>
+                <textarea tabindex=-1></textarea>
+                <div id=preview>
+                    <table id=previewTable>
+                    </table>
+                </div>
+            </div>
+            `,
+        css: `
+            :host {
+                vertical-align: top;
+            }
+            #droparea {
+                flex:1 1 auto;
+                position:relative;
+                padding:.2em;
+                display:grid;
+                place-items:center;
+                textarea {
+                    z-index:-1;
+                    position:absolute;
+                    inset:0;
+                xbackground:#ffa9;
+                    background:transparent;
+                    resize:none;
+                    border:0;
+                    margin:0;
+                    color : transparent;
+                }
+            }
+            #browse {
+                font:inherit;
+                #num {
+                    background:var(--color-light,#eee);
+
+                    display:inline-flex;
+                    border-radius:1em;
+                    line-height:1.1;                
+                    min-width:  1.6em;
+                    min-height: 1.6em;
+                    padding-inline: .6em;
+                    padding-block: .2em .25em;
+                    justify-content: center;
+                    align-items: center;
+                    text-align: center;
+                    box-sizing: border-box;
+                    font-size: 0.8em;
+
+                    &:empty {
+                        display:none;
+                    }
+                }
+            }
+            #preview {
+                white-space:nowrap;
+                overflow:auto;
+                font-size:12px;
+                xmax-width: 100%;
+                width:100%;
+                max-height: 10rem;
+            }
+            #previewTable {
+                flex-wrap:wrap;
+                gap:.2em;
+                flex-wrap:wrap;
+                width:100%;
+                max-height:10em;
+            }
+            #preview img {
+                display:block;
+                max-width:30px;
+                max-height:30px;
+                object-fit:contain;
+            }
+            `,
+        init({shadow}) {
+            import ('../bytes/bytes.js');
+            const real = this.realInput;
+            real.addEventListener('change', e => showPreview());
+            shadow.getElementById('browse').addEventListener('click', e => {
+                real.click();
+            });
+            this.addEventListener('dragover', e => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'copy';
+            });
+            this.addEventListener('drop', e => {
+                e.preventDefault();
+                addFiles(e.dataTransfer.files);
+            });
+            this.addEventListener('paste', e => {
+                addFiles(e.clipboardData.files);
+            });
+            // function setFiles(files){
+            //     real.files = e.clipboardData.files;
+            //     showPreview();
+            // }
+            function addFiles(files) {
+                let list = new DataTransfer();
+                for (let file of files) list.items.add(file);
+                for (let item of real.files) list.items.add(item);
+                real.files = list.files;
+                showPreview();
+            }
+            function showPreview() {
+                const preview = shadow.querySelector('#previewTable');
+                preview.innerHTML = '';
+                for (let file of real.files) {
+                    const tr = document.createElement('tr');
+                    tr.innerHTML = `
+                        <td class=img style="vertical-align:center; text-align:center"></td>
+                        <td><div style="overflow:hidden;text-overflow:ellipsis;">${file.name}</div></td>
+                        <u2-bytes style="display:table-cell; vertical-align:middle">${file.size}</u2-bytes>
+                    `;
+                    // check if its an image
+                    if (file.type.startsWith('image/')) {
+                        const img = document.createElement('img');
+                        img.src = URL.createObjectURL(file);
+                        img.alt = file.name;
+                        img.onload = e => URL.revokeObjectURL(img.src);
+                        tr.querySelector('.img').appendChild(img);
+                    }
+                    preview.appendChild(tr);
+
+
+                    //preview.appendChild(img);
+                }
+                shadow.getElementById('num').textContent = real.files.length;
+            }
+        }
+    },
+}
+
+const icoCss = import.meta.resolve('../ico/ico.css');
+customElements.define('u2-input', class extends HTMLElement {
+    constructor(...args) {
+        super(...args);
+
+        let shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true });
+
+        shadowRoot.innerHTML = `
+        <style>
+        @import url('${icoCss}');
+
+        :host {
+            display:inline-block;
+            inline-size:13em;
+            border-radius: var(--radius);
+        }
+        #input {
+            display: flex;
+            align-items: center;
+            overflow:clip;
+            border: 1px solid;
+            border-radius: inherit;
+        }
+
+        [name=start]::slotted(*) { margin-inline-start: .4rem; }
+        [name=end]::slotted(*) { margin-inline-end: .4rem; }
+
+        ::slotted(input), ::slotted(textarea), ::slotted(select) {
+            margin: 0;
+            border: 0 !important;
+            outline: 0 !important;
+            flex:1 1 auto;
+            inline-size:auto;
+        }
+        ::slotted(input) {
+            inline-size:100% !important;
+        }
+        [part=button], xbutton {
+            background:var(--color-light, #eee);
+            align-self:stretch;
+            min-width:2em;
+            &:active, &:focus, &:hover {
+                background: #e9e9e9;
+                outline:0;
+                opacity:1;
+            }
+            /* only if hover */
+            transition:.2s;
+            opacity:0;
+            :host(:hover) & {
+                opacity:1;
+            }
+        }
+
+        button {
+            border: 0;
+            background-color: transparent;
+        }
+        #input::before { /* dirty trick, first char defines the baseline, otherwise the sibling elements would no longer be at the same baseline */
+            content:'p';
+            width:0;
+            overflow:hidden;
+            display:inline-block;
+        }
+        </style>
+        <style id=typeCss>
+        </style>
+        <div id=input>
+            <slot name=start></slot>
+            <slot></slot>
+            <slot name=end></slot>
+        </div>
+        `;
+        this._internals = this.attachInternals();
+    }
+
+    connectedCallback() {
+        this.realInput = this.querySelector('input,textarea,select');
+        if (this.realInput) this._syncRealToFake();
+    }
+
+    _syncRealToFake() {
+        if (this.realInput.tagName === 'TEXTAREA') {
+            this.setAttribute('type','textarea');
+        }
+        this.setAttribute('value', this.realInput.value);
+        this.realInput.hasAttribute('name') && this.setAttribute('name', this.realInput.name);
+
+        this._internals.setFormValue(this.realInput.value);
+        this.realInput.addEventListener('input', e => {
+            this._internals.setFormValue(this.realInput.value, this.realInput.value);
+        });
+    }
+    formStateRestoreCallback(state, reason){
+        this.realInput.value = state;
+    }
+
+    static observedAttributes = ['type', 'value'];
+    static formAssociated = true;
+
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'type') {
+
+            this.realInput = this.querySelector('input,textarea,select');
+            if (this.realInput) this._syncRealToFake();
+
+            if (!this.realInput) {
+                this.innerHTML = types[newValue]?.fallback ?? types['text'].fallback;
+                this.realInput = this.querySelector('input,textarea,select');
+                this._syncRealToFake();
+            }
+
+            types[newValue] ??= types['text'];
+            this.shadowRoot.getElementById('input').innerHTML = types[newValue].input;
+            this.shadowRoot.getElementById('typeCss').textContent = types[newValue].css ?? '';
+            setTimeout(()=> {
+                types[newValue].init?.call(this, {shadow: this.shadowRoot});
+            });
+
+        }
+        if (name === 'value') {
+            this.realInput.value = newValue;
+        }
+    }
+
+    /* checkbox */
+    get value(){
+        return this.realInput.value;
+    }
+});
+
+
+
+

package/el/input/tests/formParticipation.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>test</title>
+    <script src="../../../u2/auto.js" type=module async></script>
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+    
+
+<body>
+
+<section>
+
+    <h1>Participating in Form-Subission?</h1>
+    <form method=get id=form>
+        <table class="u2-table -Fields">
+            <tr>
+                <td> <input name=normal>
+                <th> normal
+            <tr>
+                <td> <input>
+                <th> without name
+            <tr>
+                <td> <input name=disabled disabled>
+                <th> disabled
+            <tr>
+                <td> <input name=readonly readonly>
+                <th> readonly
+            <tr>
+                <td> <input name="inert" inert>
+                <th> inert
+            <tr>
+                <td> <input name=hidden hidden>
+                <th> hidden (attribute)
+            <tr>
+                <td><input name="visibilityAndOpacity" type="text" style="visibility:hidden;opacity:0" value="visibilityAndOpacityValue">
+                <th> visibility:hidden & opacity:0
+            <tr>
+                <td>
+                    <fieldset disabled>
+                        <input name="fieldsetDisabled" type="text">
+                    </fieldset>
+                <th> fieldset disabled                    
+            <tr>
+                <td> <input name="otherForm" form=form2>
+                <th> other form (attribute)
+            <tr>
+                <td><noscript>
+                        <input name="insideNoscript" type="text" value="insideNoscriptValue">
+                    </noscript>
+                <th>inside noscript
+            <tr>
+                <td> <div id="shadowDomTest"></div>
+                <th> shadowDom only
+            <tr>
+                <td><div name="contentEditable" contenteditable>Editable Content</div>
+                <th>contenteditable itself
+            <tr>
+                <td>
+                    <div contenteditable>
+                        <input name="insideContentEditable">editable
+                    </div>
+                <th>input inside contenteditable
+            <tr>
+                <td> <output name="output">60</output>
+                <th> output
+
+            <tr>
+                <td> <div id="slotted"><input name="slotted"></div>
+                <th> slotted
+            <tr>
+                <td> <div id="shadowNoContent"><input name="in shadow dom without content"></div>
+                <th> shadow dom without content
+            <tr>
+                <td> <div id="shadowSlot"></div>
+                <th> shadow dom with slot
+            <tr>
+                <td> <button name=button0 value="1">Button first</button>
+                <th> first button when submitted by enter inside an input
+            <tr>
+                <td> <button name=button1 value="1">Button 1</button>
+                <th> clicked button
+            <tr>
+                <td> <button name=button2 value="1">Button 2</button>
+                <th> not clicked button
+        </table>
+
+    </form>
+
+    <script type=module>
+    shadowDomTest.attachShadow({mode:'open'}).innerHTML = `<input name="in shadowDom">`;
+    shadowNoContent.attachShadow({mode:'open'}).innerHTML = ``;
+    slotted.attachShadow({mode:'open'}).innerHTML = `<slot></slot>`;
+    shadowSlot.attachShadow({mode:'open'}).innerHTML = `<slot><input name="in slot of shadowDom"></slot>`;
+
+
+    form.onsubmit = function(event) {
+        event.preventDefault();
+        const fdata = new FormData(form);
+        if (event.submitter && event.submitter.name) {
+            fdata.append(event.submitter.name, event.submitter.value);
+        }
+        for (let input of form.querySelectorAll('tr')) {
+            input.style.backgroundColor = 'lightcoral';
+        }
+        for (let [name, value] of fdata) {
+            form.elements[name].closest('tr').style.backgroundColor = 'lightgreen';
+        }
+    }
+
+    </script>

package/el/input/tests/minimal.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>test</title>
+    <!-- <script src="../../../u2/tests/test-init.js" type=module async></script> -->
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+    
+    <link rel=stylesheet href="../input.css">
+    <script src="../input.js" type=module async></script>
+
+<body>
+
+<section class="main">
+ 
+    <label>
+        <u2-input>
+            <span slot=start>☎</span>
+            <input type="tel">
+            <span slot=end>×</span>
+        </u2-input>
+    </label>
+
+</section>
+
+<style>
+u2-input:focus-within {
+    border-color: green;
+}
+</style>