Panacea

Panacea is the collection of vanilla Javascript components and services created to enable our developers to use whatever Javascript framework they want while still maintaining a single codebase for these components and services.

Custom Components

Character Counter 

<input class="form-control
    data-component="cm-charactercount
    data-options="{maxLength:10}
    type="text
    value="Value in field is invalid"
    placeholder="Text field with character count">
                        
data-options="{
    maxLength:10
}"
<textarea class="form-control"
    data-component="cm-charactercount"
    data-options="{maxLength:52,errorMsg:'foutje!'}"
    type="text"
    value="Value in field is invalid"
    placeholder="Text area with character count">
</textarea>
data-options="{
    maxLength:52,
    errorMsg:'foutje!'
}"

Contextmenu 


<div id="ContextMenu1" 
    data-component="cm-contextmenu" 
    data-options="{
        'id': 'ContextMenu1', 
        'language': 'NL', 
        'scope': 'aurora', 
        'menuitems' :[
            {
                'IconKey': 'check', 
                'TranslationKey': 'item1', 
                'GroupId': 1
            }, 
            {
                'IconKey': 'delete', 
                'TranslationKey': 'item2', 
                'GroupId': 2
            }, 
            {
                'TranslationKey': 'item3', 
                'GroupId': 2
            }
        ]}"/>
                

<div id="ContextMenu1" 
    data-component="cm-contextmenu" 
    data-options="{
        'id': 'ContextMenu2', 
        'language': 'NL', 
        'scope': 'aurora', 
        'menuitems' :[
            {
                'TranslationKey': 'item1'
            }, 
            {
                'TranslationKey': 'item2'
            }, 
            {
                'TranslationKey': 'item3'
            }
        ]}"/>

Date picker 

<input class="form-control"
    value=""
    data-component="cm-datepicker"
    placeholder="choose a date"
    type="text"
    onchange="your_own_change_tracker(event)"
    data-options="{rangedatepicker:true,predefined:true,locale:'nl'}">
data-options="{
    selectedDate:'2016-12-01'
    minDate:'2015-01-01',
    maxDate:'2018-01-01',
    switchYear:true,
    locale:'nl'
}"
data-options="{
    rangedatepicker:true,
    locale:'fr'
}"
data-options="{
    rangedatepicker:true,
    predefined:true,
    locale:'nl'
}"

Date picker 

<input class="form-control"
    value=""
    data-component="cm-datepicker-beta"
    placeholder="choose a date"
    type="text"
    onchange="your_own_change_tracker(event)"
    data-options="{rangedatepicker:true,predefined:true,locale:'nl'}">
data-options="{
    rangedatepicker:true,
    locale:'fr'
}"
data-options="{
    rangedatepicker:true,
    predefined:true,
    locale:'nl'
}"

CM Icons

CM indicator (loader) 

<cm-indicator ></cm-indicator>

you can use an extra class "full-view" to completely cover the containing element.

Determined CM indicator (loader) 

<cm-indicator data-percent="50" ></cm-indicator>

you can use an extra attribute data-percent to set the loading percentage.

Determined completion

0 %

Menu

Modals

Dialogs display content in an addtional layer on top of the app. They allow users to immediately address an action without going out of context.

  • Acknowledgement Dialog
  • Dialog (with custom buttontexts)
  • Error Dialog (Success)

Acknowledgment Dialogue

Dialogs display content in an addtional layer on top of the app. They allow users to immediately address an action without going out of context.

  • Show

CM 'app'

Delete 'object'?

Dialog (with custom buttontexts)

Dialogs display content in an addtional layer on top of the app. They allow users to immediately address an action without going out of context.

  • Show

A new message

I can have any conent inhere I want!

Notifications

Notifications are messages to alert the user of important information related to their current activity - whether it is the system reaching out to the user, or users reaching out to other users via the system.

Message

Notification messages are messages triggered by users themselves or showing actions triggered by other users. They will automatically close after 5 seconds.

  • Show
Ishmaila Muhupatsi
We should try to minimize the amount of effort
09:02

Toast (Success)

Toasts are messages triggered by the system to show its status to the user. Think of errors, successes or warnings. They will automatically close after 5 seconds.

  • Show
Success

Toast (Failure)

Toasts are messages triggered by the system to show its status to the user. Think of errors, successes or warnings. They will automatically close after 5 seconds.

  • Show
Error

Toast (Informative)

Notification messages are messages triggered by users themselves or showing actions triggered by other users. They will automatically close after 5 seconds.

  • Show
Success

Pagination 

<cm-pagination
    data-take="10"
    data-skip="0"
    data-total="9999"
    data-show="5"
    data-url="/cm-pagination?dev&skip={skip}&take={take}"
                             onclick="pagechanged(event)"
></cm-pagination>

Phone input with forced country and type 

<input
    class='form-control'
    value='0032 475 92 80 29'
    data-component='cm-phone-input'
    data-options="{locale:'nl',forceType:'mobile',country:'BE',forceCountry:true}"
    placeholder='type your phone number'
    type='text'>
data-options="{
    locale:'nl',
    forceType:'mobile',
    country:'BE',
    forceCountry:true
}"

Phone input with forced country 

<input
    class='form-control'
    value='0032 475 92 80 29'
    data-component='cm-phone-input'
    data-options="{locale:'fr',country:'BE'}"
    placeholder='type your phone number'
    type='text'>
data-options="{
    locale:'fr',
    country:'BE'
}"

Normal phone input 

<input
    class='form-control'
    value='0032 475 92 80 29'
    data-component='cm-phone-input'
    placeholder='type your phone number'
    type='text'>

Select 

<select class="form-control
    data-component="select"
    placeholder="Text field with character count">
    <option>option one</option>
    <option>option two</option>
</select>
 
 <input class="form-control"
    data-component="cm-select"
    data-options="{
        'items': [
            {
                'title': 'test1',
                'disabled': true
            },
            {
                'title': 'test2'
            },{
                'title': 'test3'
            }
        ]
    }">
<div class="form-input">
    <select
        class="form-control"
        data-component="cm-select"
        onchange="selectchanged(event)"
        placeholder="select an option">
            <option value="opt1">
                ap option 1
            </option>
            <option value="opt2">
                ab option 2
            <option>
            <option value="opt3" disabled>
                bc option 3
            <option>
    </select>
    <label>
        Select box label
    </label>
                        </div>
<div class="form-input">
    <select class="form-control flag-select"
        data-component="cm-select"
        onchange="selectchanged(event)"
        placeholder="select an language">
        <option value="de" >Deutsch</option>
        <option value="en" >English</option>
        <option value="fr" >Français</option>
        <option value="nl" >Nederlands</option>
        <option value="ja" >日本語</option>
        <option value="zh-s" >简体</option>
        <option value="zh-t" >繁體</option>
    </select>
    <label>
        Select box with flags
    </label>
0 100

Sms Textarea 

<textarea
    class="form-control"
    data-component="cm-sms-textarea"
    data-options="{maxSms:1,errorMsg:'Max length exceeded.'}"
    placeholder="type your sms" >
</textarea>
data-options="{
    maxSms:1
}"

Vat input

DE298052829 ,GB246520908 , NL815652288B01 
<input
    class='form-control'
    value='NL-81-56.52288B01'
    data-component='cm-vat-input'
    data-options="{locale:'nl',country:'NL',forceCountry:true}"
    placeholder='type your phone number'
    type='text'>
data-options="{
    locale:'nl',
    country:'NL',
    forceCountry:true
}"
<input
    class='form-control'
    value='246520908'
    data-component='cm-phone-input'
    data-options="{locale:'fr',country:'GB'}"
    placeholder='type your phone number'
    type='text'>
data-options="{
    locale:'fr',
    country:'GB'
}"
<input
    class='form-control'
    value='DE298052829'
    data-component='cm-phone-input'
    placeholder='type your phone number'
    type='text'>