Combo

//<code-header>
fiddle.title = 'Combo';
//</code-header>
new Combo({
    items         : ['Fanta', 'Loranga', 'Jaffa', 'Zingo', 'Orangina'],
    label         : 'Soda',
    labelPosition : 'above',
    placeholder   : 'Select a soda',
    appendTo      : targetElement
});

//<code-header>
fiddle.title = 'Basic combo';
//</code-header>
// combo with string items
new Combo({
    labelPosition : 'above',
    items         : ['Fanta', 'Loranga', 'Jaffa', 'Zingo', 'Orangina'],
    label         : 'Items as strings',
    appendTo      : targetElement
});

// combo with object items
new Combo({
    labelPosition : 'above',
    items         : [{ value : 'pepsi', text : 'Pepsi' }, { value : 'coke', text : 'Coca Cola' }],
    label         : 'Items as objects',
    appendTo      : targetElement
});

// non-editable combo (user can only pick from list)
new Combo({
    labelPosition : 'above',
    items         : [{ value : 'MtnDew', text : 'Mountain Dew' }, 'Sprite', '7up'],
    label         : 'Not editable',
    editable      : false,
    appendTo      : targetElement
});

// editable combo (user can type to filter)
new Combo({
    labelPosition : 'above',
    items         : ['Captain America', 'Hulk', 'She-Hulk', 'Hawkeye'],
    label         : 'Editable',
    editable      : true,
    appendTo      : targetElement
});

//<code-header>
fiddle.title = 'Combo';
//</code-header>
new Combo({
    items         : ['Fanta', 'Loranga', 'Jaffa', 'Zingo', 'Orangina'],
    label         : 'Soda',
    labelPosition : 'above',
    placeholder   : 'Select a soda',
    appendTo      : targetElement
});

//<code-header>
fiddle.title = 'Remote combo';
//</code-header>
// Type-ahead combo list with remotely loaded data
new Combo({
    appendTo        : targetElement,
    label           : 'Countries',
    minChars        : 2,
    displayField    : 'name',
    valueField      : 'code',
    filterParamName : 'filter',
    store           : {
        readUrl : 'remotecombo'
    }
});

const countries = [
    { name : 'Afghanistan', code : 'AF' },
    { name : 'Åland Islands', code : 'AX' },
    { name : 'Albania', code : 'AL' },
    { name : 'Algeria', code : 'DZ' },
    { name : 'American Samoa', code : 'AS' },
    { name : 'AndorrA', code : 'AD' },
    { name : 'Angola', code : 'AO' },
    { name : 'Anguilla', code : 'AI' },
    { name : 'Antarctica', code : 'AQ' },
    { name : 'Antigua and Barbuda', code : 'AG' },
    { name : 'Argentina', code : 'AR' },
    { name : 'Armenia', code : 'AM' },
    { name : 'Aruba', code : 'AW' },
    { name : 'Australia', code : 'AU' },
    { name : 'Austria', code : 'AT' },
    { name : 'Azerbaijan', code : 'AZ' },
    { name : 'Bahamas', code : 'BS' },
    { name : 'Bahrain', code : 'BH' },
    { name : 'Bangladesh', code : 'BD' },
    { name : 'Barbados', code : 'BB' },
    { name : 'Belarus', code : 'BY' },
    { name : 'Belgium', code : 'BE' },
    { name : 'Belize', code : 'BZ' },
    { name : 'Benin', code : 'BJ' },
    { name : 'Bermuda', code : 'BM' },
    { name : 'Bhutan', code : 'BT' },
    { name : 'Bolivia', code : 'BO' },
    { name : 'Bosnia and Herzegovina', code : 'BA' },
    { name : 'Botswana', code : 'BW' },
    { name : 'Bouvet Island', code : 'BV' },
    { name : 'Brazil', code : 'BR' },
    { name : 'British Indian Ocean Territory', code : 'IO' },
    { name : 'Brunei Darussalam', code : 'BN' },
    { name : 'Bulgaria', code : 'BG' },
    { name : 'Burkina Faso', code : 'BF' },
    { name : 'Burundi', code : 'BI' },
    { name : 'Cambodia', code : 'KH' },
    { name : 'Cameroon', code : 'CM' },
    { name : 'Canada', code : 'CA' },
    { name : 'Cape Verde', code : 'CV' },
    { name : 'Cayman Islands', code : 'KY' },
    { name : 'Central African Republic', code : 'CF' },
    { name : 'Chad', code : 'TD' },
    { name : 'Chile', code : 'CL' },
    { name : 'China', code : 'CN' },
    { name : 'Christmas Island', code : 'CX' },
    { name : 'Cocos (Keeling) Islands', code : 'CC' },
    { name : 'Colombia', code : 'CO' },
    { name : 'Comoros', code : 'KM' },
    { name : 'Congo', code : 'CG' },
    { name : 'Congo, The Democratic Republic of the', code : 'CD' },
    { name : 'Cook Islands', code : 'CK' },
    { name : 'Costa Rica', code : 'CR' },
    { name : 'Cote D\'Ivoire', code : 'CI' },
    { name : 'Croatia', code : 'HR' },
    { name : 'Cuba', code : 'CU' },
    { name : 'Cyprus', code : 'CY' },
    { name : 'Czech Republic', code : 'CZ' },
    { name : 'Denmark', code : 'DK' },
    { name : 'Djibouti', code : 'DJ' },
    { name : 'Dominica', code : 'DM' },
    { name : 'Dominican Republic', code : 'DO' },
    { name : 'Ecuador', code : 'EC' },
    { name : 'Egypt', code : 'EG' },
    { name : 'El Salvador', code : 'SV' },
    { name : 'Equatorial Guinea', code : 'GQ' },
    { name : 'Eritrea', code : 'ER' },
    { name : 'Estonia', code : 'EE' },
    { name : 'Ethiopia', code : 'ET' },
    { name : 'Falkland Islands (Malvinas)', code : 'FK' },
    { name : 'Faroe Islands', code : 'FO' },
    { name : 'Fiji', code : 'FJ' },
    { name : 'Finland', code : 'FI' },
    { name : 'France', code : 'FR' },
    { name : 'French Guiana', code : 'GF' },
    { name : 'French Polynesia', code : 'PF' },
    { name : 'French Southern Territories', code : 'TF' },
    { name : 'Gabon', code : 'GA' },
    { name : 'Gambia', code : 'GM' },
    { name : 'Georgia', code : 'GE' },
    { name : 'Germany', code : 'DE' },
    { name : 'Ghana', code : 'GH' },
    { name : 'Gibraltar', code : 'GI' },
    { name : 'Greece', code : 'GR' },
    { name : 'Greenland', code : 'GL' },
    { name : 'Grenada', code : 'GD' },
    { name : 'Guadeloupe', code : 'GP' },
    { name : 'Guam', code : 'GU' },
    { name : 'Guatemala', code : 'GT' },
    { name : 'Guernsey', code : 'GG' },
    { name : 'Guinea', code : 'GN' },
    { name : 'Guinea-Bissau', code : 'GW' },
    { name : 'Guyana', code : 'GY' },
    { name : 'Haiti', code : 'HT' },
    { name : 'Heard Island and Mcdonald Islands', code : 'HM' },
    { name : 'Holy See (Vatican City State)', code : 'VA' },
    { name : 'Honduras', code : 'HN' },
    { name : 'Hong Kong', code : 'HK' },
    { name : 'Hungary', code : 'HU' },
    { name : 'Iceland', code : 'IS' },
    { name : 'India', code : 'IN' },
    { name : 'Indonesia', code : 'ID' },
    { name : 'Iran, Islamic Republic Of', code : 'IR' },
    { name : 'Iraq', code : 'IQ' },
    { name : 'Ireland', code : 'IE' },
    { name : 'Isle of Man', code : 'IM' },
    { name : 'Israel', code : 'IL' },
    { name : 'Italy', code : 'IT' },
    { name : 'Jamaica', code : 'JM' },
    { name : 'Japan', code : 'JP' },
    { name : 'Jersey', code : 'JE' },
    { name : 'Jordan', code : 'JO' },
    { name : 'Kazakhstan', code : 'KZ' },
    { name : 'Kenya', code : 'KE' },
    { name : 'Kiribati', code : 'KI' },
    { name : 'Korea, Democratic People\'S Republic of', code : 'KP' },
    { name : 'Korea, Republic of', code : 'KR' },
    { name : 'Kuwait', code : 'KW' },
    { name : 'Kyrgyzstan', code : 'KG' },
    { name : 'Lao People\'S Democratic Republic', code : 'LA' },
    { name : 'Latvia', code : 'LV' },
    { name : 'Lebanon', code : 'LB' },
    { name : 'Lesotho', code : 'LS' },
    { name : 'Liberia', code : 'LR' },
    { name : 'Libyan Arab Jamahiriya', code : 'LY' },
    { name : 'Liechtenstein', code : 'LI' },
    { name : 'Lithuania', code : 'LT' },
    { name : 'Luxembourg', code : 'LU' },
    { name : 'Macao', code : 'MO' },
    { name : 'Macedonia, The Former Yugoslav Republic of', code : 'MK' },
    { name : 'Madagascar', code : 'MG' },
    { name : 'Malawi', code : 'MW' },
    { name : 'Malaysia', code : 'MY' },
    { name : 'Maldives', code : 'MV' },
    { name : 'Mali', code : 'ML' },
    { name : 'Malta', code : 'MT' },
    { name : 'Marshall Islands', code : 'MH' },
    { name : 'Martinique', code : 'MQ' },
    { name : 'Mauritania', code : 'MR' },
    { name : 'Mauritius', code : 'MU' },
    { name : 'Mayotte', code : 'YT' },
    { name : 'Mexico', code : 'MX' },
    { name : 'Micronesia, Federated States of', code : 'FM' },
    { name : 'Moldova, Republic of', code : 'MD' },
    { name : 'Monaco', code : 'MC' },
    { name : 'Mongolia', code : 'MN' },
    { name : 'Montserrat', code : 'MS' },
    { name : 'Morocco', code : 'MA' },
    { name : 'Mozambique', code : 'MZ' },
    { name : 'Myanmar', code : 'MM' },
    { name : 'Namibia', code : 'NA' },
    { name : 'Nauru', code : 'NR' },
    { name : 'Nepal', code : 'NP' },
    { name : 'Netherlands', code : 'NL' },
    { name : 'Netherlands Antilles', code : 'AN' },
    { name : 'New Caledonia', code : 'NC' },
    { name : 'New Zealand', code : 'NZ' },
    { name : 'Nicaragua', code : 'NI' },
    { name : 'Niger', code : 'NE' },
    { name : 'Nigeria', code : 'NG' },
    { name : 'Niue', code : 'NU' },
    { name : 'Norfolk Island', code : 'NF' },
    { name : 'Northern Mariana Islands', code : 'MP' },
    { name : 'Norway', code : 'NO' },
    { name : 'Oman', code : 'OM' },
    { name : 'Pakistan', code : 'PK' },
    { name : 'Palau', code : 'PW' },
    { name : 'Palestinian Territory, Occupied', code : 'PS' },
    { name : 'Panama', code : 'PA' },
    { name : 'Papua New Guinea', code : 'PG' },
    { name : 'Paraguay', code : 'PY' },
    { name : 'Peru', code : 'PE' },
    { name : 'Philippines', code : 'PH' },
    { name : 'Pitcairn', code : 'PN' },
    { name : 'Poland', code : 'PL' },
    { name : 'Portugal', code : 'PT' },
    { name : 'Puerto Rico', code : 'PR' },
    { name : 'Qatar', code : 'QA' },
    { name : 'Reunion', code : 'RE' },
    { name : 'Romania', code : 'RO' },
    { name : 'Russian Federation', code : 'RU' },
    { name : 'RWANDA', code : 'RW' },
    { name : 'Saint Helena', code : 'SH' },
    { name : 'Saint Kitts and Nevis', code : 'KN' },
    { name : 'Saint Lucia', code : 'LC' },
    { name : 'Saint Pierre and Miquelon', code : 'PM' },
    { name : 'Saint Vincent and the Grenadines', code : 'VC' },
    { name : 'Samoa', code : 'WS' },
    { name : 'San Marino', code : 'SM' },
    { name : 'Sao Tome and Principe', code : 'ST' },
    { name : 'Saudi Arabia', code : 'SA' },
    { name : 'Senegal', code : 'SN' },
    { name : 'Serbia and Montenegro', code : 'CS' },
    { name : 'Seychelles', code : 'SC' },
    { name : 'Sierra Leone', code : 'SL' },
    { name : 'Singapore', code : 'SG' },
    { name : 'Slovakia', code : 'SK' },
    { name : 'Slovenia', code : 'SI' },
    { name : 'Solomon Islands', code : 'SB' },
    { name : 'Somalia', code : 'SO' },
    { name : 'South Africa', code : 'ZA' },
    { name : 'South Georgia and the South Sandwich Islands', code : 'GS' },
    { name : 'Spain', code : 'ES' },
    { name : 'Sri Lanka', code : 'LK' },
    { name : 'Sudan', code : 'SD' },
    { name : 'Suriname', code : 'SR' },
    { name : 'Svalbard and Jan Mayen', code : 'SJ' },
    { name : 'Swaziland', code : 'SZ' },
    { name : 'Sweden', code : 'SE' },
    { name : 'Switzerland', code : 'CH' },
    { name : 'Syrian Arab Republic', code : 'SY' },
    { name : 'Taiwan, Province of China', code : 'TW' },
    { name : 'Tajikistan', code : 'TJ' },
    { name : 'Tanzania, United Republic of', code : 'TZ' },
    { name : 'Thailand', code : 'TH' },
    { name : 'Timor-Leste', code : 'TL' },
    { name : 'Togo', code : 'TG' },
    { name : 'Tokelau', code : 'TK' },
    { name : 'Tonga', code : 'TO' },
    { name : 'Trinidad and Tobago', code : 'TT' },
    { name : 'Tunisia', code : 'TN' },
    { name : 'Turkey', code : 'TR' },
    { name : 'Turkmenistan', code : 'TM' },
    { name : 'Turks and Caicos Islands', code : 'TC' },
    { name : 'Tuvalu', code : 'TV' },
    { name : 'Uganda', code : 'UG' },
    { name : 'Ukraine', code : 'UA' },
    { name : 'United Arab Emirates', code : 'AE' },
    { name : 'United Kingdom', code : 'GB' },
    { name : 'United States', code : 'US' },
    { name : 'United States Minor Outlying Islands', code : 'UM' },
    { name : 'Uruguay', code : 'UY' },
    { name : 'Uzbekistan', code : 'UZ' },
    { name : 'Vanuatu', code : 'VU' },
    { name : 'Venezuela', code : 'VE' },
    { name : 'Viet Nam', code : 'VN' },
    { name : 'Virgin Islands, British', code : 'VG' },
    { name : 'Virgin Islands, U.S.', code : 'VI' },
    { name : 'Wallis and Futuna', code : 'WF' },
    { name : 'Western Sahara', code : 'EH' },
    { name : 'Yemen', code : 'YE' },
    { name : 'Zambia', code : 'ZM' },
    { name : 'Zimbabwe', code : 'ZW' }
];

// Mock server endpoint for demo purposes
AjaxHelper.mockUrl('remotecombo', (url, params) => {
    const matches = params ?
        countries.filter(country => StringHelper.stripDiacritics(country.name.toLowerCase()).startsWith(StringHelper.stripDiacritics(params.filter.toLowerCase()))) :
        countries;
    return {
        responseText : JSON.stringify({
            success : true,
            total   : matches.length,
            data    : matches
        })
    };
});

//<code-header>
fiddle.title = 'Multiselect combo';
CSSHelper.insertRule('.foodmenu-combo .b-chip i { margin-inline-end:0.4em }', targetElement.getRootNode());
CSSHelper.insertRule('.b-list-item-group-header { font-size:1.1em; }', targetElement.getRootNode());
CSSHelper.insertRule('.b-foodmenu-item { display:flex; flex-direction:column; align-items:flex-start; margin-inline-start:0.3em}', targetElement.getRootNode());
CSSHelper.insertRule('.b-foodmenu-item span.name { font-size:1.1em; }', targetElement.getRootNode());
CSSHelper.insertRule('.b-foodmenu-item small { display:block; color:#999; margin-top:0.3em;}', targetElement.getRootNode());
CSSHelper.insertRule('.b-foodmenu-item small { display:block; color:#999; margin-top:0.3em;}', targetElement.getRootNode());
//</code-header>
// multiSelect
new Combo({
    appendTo    : targetElement,
    multiSelect : true,
    label       : 'Skills - multiSelect',
    value       : ['Javascript', 'SQL'],
    items       : [
        'BASIC',
        'COBOL',
        'FORTRAN',
        'DBL',
        'SQL',
        'C/C++',
        'Java',
        'Javascript'
    ],
    width : '100%'
});

new Combo({
    appendTo     : targetElement,
    width        : '100%',
    multiSelect  : true,
    cls          : 'foodmenu-combo',
    style        : 'margin-top:3em',
    label        : 'Grouped list + multiSelect. Type to filter the picker when open',
    displayField : 'name',
    valueField   : 'id',
    value        : [1, 5, 9],
    listCls      : 'grouped-combo',
    picker       : {
        groupHeaderTpl : (record, groupName) => `
           <i class="fa fa-${groupName === 'Food' ? 'pizza-slice' : groupName === 'Drinks' ? 'wine-glass' : 'utensils'}" style="margin-inline-end:0.8em;"></i>${groupName}
        `
    },
    chipView : {
        iconTpl : (record) => `<i class="fa fa-${record.icon}"></i>`
    },

    listItemTpl : record => `
        <div class="b-foodmenu-item">
            <span class="name">${record.name}</span>
            <small>${record.calories} calories</small>
        </div>
    `,
    editable : false,
    store    : {
        fields : [
            'type',
            'calories',
            'icon'
        ],
        groupers : [
            { field : 'type', ascending : false }
        ],
        data : [
            { id : 1, name : 'Cheese sticks', type : 'starters', calories : 312, icon : 'cheese' },
            { id : 2, name : 'Fried onion rings', type : 'starters', calories : 234, icon : 'ring' },
            { id : 3, name : 'Hummus', type : 'starters', calories : 532, icon : 'seedling' },
            { id : 4, name : 'Fried fish', type : 'food', calories : 243, icon : 'fish' },
            { id : 5, name : 'Pizza', type : 'food', calories : 687, icon : 'pizza-slice' },
            { id : 6, name : 'Hamburger', type : 'food', calories : 734, icon : 'hamburger' },
            { id : 7, name : 'Hot dog', type : 'food', calories : 435, icon : 'hotdog' },
            { id : 8, name : 'Salad', type : 'food', calories : 112, icon : 'salad' },
            { id : 9, name : 'Gin tonic', type : 'drinks', calories : 145, icon : 'glass-martini' },
            { id : 10, name : 'Wine', type : 'drinks', calories : 150, icon : 'glass-wine' },
            { id : 11, name : 'Soda', type : 'drinks', calories : 205, icon : 'glass-citrus' },
            { id : 12, name : 'Beer', type : 'drinks', calories : 109, icon : 'beer' }
        ]
    }
});

//<code-header>
fiddle.title = 'Email multiselect';
//</code-header>
const
    emailAddresses = new Store({
        data : [
            { id : 10, name : 'Mike McGregor',    email : '[email protected]' },
            { id : 11, name : 'Linda Ewans',      email : '[email protected]' },
            { id : 12, name : 'Don Scott',        email : '[email protected]' },
            { id : 13, name : 'Karen Smith',      email : '[email protected]' },
            { id : 14, name : 'Doug Johnson',     email : '[email protected]' },
            { id : 15, name : 'Jenny Adams',      email : '[email protected]' },
            { id : 16, name : 'Daniel Williams',  email : '[email protected]' },
            { id : 17, name : 'Melissa Brown',    email : '[email protected]' },
            { id : 18, name : 'John Jones',       email : '[email protected]' },
            { id : 19, name : 'Jane Miller',      email : '[email protected]' },
            { id : 20, name : 'Theo Davis',       email : '[email protected]' },
            { id : 21, name : 'Lisa More',        email : '[email protected]' },
            { id : 22, name : 'Adam Wilson',      email : '[email protected]' },
            { id : 23, name : 'Mary Taylor',      email : '[email protected]' },
            { id : 24, name : 'Barbara Anderson', email : '[email protected]' },
            { id : 25, name : 'James Thomas',     email : '[email protected]' },
            { id : 26, name : 'David Jackson',    email : '[email protected]' }
        ]
    }),
    comboConfig = {
        type         : 'combo',
        label        : 'To',
        multiSelect  : true,
        store        : emailAddresses,
        displayField : 'name',
        chipView     : {
            tooltip : {
                cls         : 'b-recipient-card',
                newInstance : true,
                forSelector : '.b-chip',
                getHtml     : 'up.emailChipTooltip'
            }
        }
    };

new Panel({
    appendTo      : targetElement,
    title         : 'Compose',
    height        : 500,
    labelPosition : 'align-before',
    items         : {
        // Three almost identical Combos
        to  : { ...comboConfig, required : true },
        cc  : { ...comboConfig, label : 'CC' },
        bcc : { ...comboConfig, label : 'BCC' },

        // A text field for the subject
        subject : {
            type    : 'textfield',
            label   : 'Subject',
            onInput : 'up.onSubjectInput'
        },

        // And the body textaera
        body : {
            type     : 'textarea',
            label    : 'Message',
            height   : 100,
            required : true
        }
    },

    bbar : {
        items : {
            send : {
                text    : 'Send',
                onClick : 'up.onSendClick'
            }
        }
    },

    onSendClick() {
        this.items.forEach(i => i.syncInvalid());
        if (!this.items.every(i => i.isValid)) {
            Toast.show('Please complete the mandatory fields');
        }
        else {
            MessageDialog.alert({
                title   : 'Email system',
                message : 'Sent'
            });
        }
    },

    onSubjectInput({ value }) {
        this.title = value || 'Subject';
    },

    emailChipTooltip({ tip, activeTarget }) {
        const person = tip.owner.getRecordFromElement(activeTarget);

        return {
            children : [{
                className : 'b-recipient-card-name',
                text      : person.name
            }, {
                className : 'b-recipient-card-email',
                text      : person.email
            }]
        };
    }
});