djgentelella 0.3.27__py3-none-any.whl → 0.3.29__py3-none-any.whl

djgentelella/static/gentelella/css/custom.css

@@ -15,7 +15,9 @@ html , body{
  height:100%;
  }
 
-
+.checkableall{
+    width: unset;
+}
 
 
 .daterangepicker .ranges li {
@@ -2557,6 +2559,9 @@ span.tag a {
     width: 100%;
     height: 0px
 }
+.tagify {
+    width: 100%;
+}
 .not_valid {
     background: #FBD8DB !important;
     color: #90111A !important

djgentelella/static/gentelella/js/base/form.common.js

@@ -213,6 +213,7 @@ function updateInstanceValuesForm(form, name, value) {
             done = true;
         }
 
+
         // New code for testing  (*** start ***)
         // data loading in select, autocompleteselect, autocompletemultiselect
         else if (inputfield.is('select') && inputfield.data().widget === "Select") {
@@ -220,12 +221,12 @@ function updateInstanceValuesForm(form, name, value) {
             done = true;
         } else if (inputfield.is('select') && inputfield.data().widget === "AutocompleteSelect") {
             let data = value;
-            let select2Obj = inputfield.data('select2');
-            if (select2Obj) {
-                inputfield.select2('trigger', 'select', {
-                    data: data
-                });
+
+            if (data) {
+                let newOption = new Option(data.text, data.id, true, true);
+                inputfield.append(newOption).trigger('change');
             }
+
             done = true;
         } else if (inputfield.is('select') && inputfield.data().widget === "AutocompleteSelectMultiple") {
 

djgentelella/static/gentelella/js/base/tagify.js

@@ -0,0 +1,45 @@
+function build_tagginginput(instances){
+    instances.each(function(index, element){
+         let tagify = new Tagify(element, {});
+         //element.dataset.tagify = JSON.stringify(tagify);
+    });
+}
+function build_tagging_email(instances){
+    instances.each(function(index, element){
+        let p = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        let tagify = new Tagify(element, {
+            pattern: p
+        });
+    });
+}
+
+function build_remote_tagify_email(inputs){
+    inputs.each(function(index, element){
+       let url = element.dataset['url'];
+
+       let tagify = new Tagify(element, {whitelist:[],
+        pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})*$/,
+         dropdown: {
+            searchKeys: ["value", "name"] //  fuzzy-search matching for those whitelist items' properties
+         }
+       }),
+        controller;
+
+        function onInput( e ){
+            var value = e.detail.value
+              tagify.whitelist = null // reset the whitelist
+              // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
+              controller && controller.abort()
+              controller = new AbortController()
+              // show loading animation and hide the suggestions dropdown
+              tagify.loading(true);
+            fetch(url+'?value=' + value, {signal:controller.signal})
+                .then(RES => RES.json())
+                .then(function(newWhitelist){
+                  tagify.whitelist = newWhitelist // update whitelist Array in-place
+                  tagify.loading(false); // render the suggestions dropdown
+            })
+        }
+        tagify.on('input', onInput)
+    })
+}

djgentelella/static/gentelella/js/base.js

@@ -914,6 +914,7 @@ function updateInstanceValuesForm(form, name, value) {
             done = true;
         }
 
+
         // New code for testing  (*** start ***)
         // data loading in select, autocompleteselect, autocompletemultiselect
         else if (inputfield.is('select') && inputfield.data().widget === "Select") {
@@ -921,12 +922,12 @@ function updateInstanceValuesForm(form, name, value) {
             done = true;
         } else if (inputfield.is('select') && inputfield.data().widget === "AutocompleteSelect") {
             let data = value;
-            let select2Obj = inputfield.data('select2');
-            if (select2Obj) {
-                inputfield.select2('trigger', 'select', {
-                    data: data
-                });
+
+            if (data) {
+                let newOption = new Option(data.text, data.id, true, true);
+                inputfield.append(newOption).trigger('change');
             }
+
             done = true;
         } else if (inputfield.is('select') && inputfield.data().widget === "AutocompleteSelectMultiple") {
 
@@ -2383,3 +2384,50 @@ class CardList {
   }
 }
 
+
+function build_tagginginput(instances){
+    instances.each(function(index, element){
+         let tagify = new Tagify(element, {});
+         //element.dataset.tagify = JSON.stringify(tagify);
+    });
+}
+function build_tagging_email(instances){
+    instances.each(function(index, element){
+        let p = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        let tagify = new Tagify(element, {
+            pattern: p
+        });
+    });
+}
+
+function build_remote_tagify_email(inputs){
+    inputs.each(function(index, element){
+       let url = element.dataset['url'];
+
+       let tagify = new Tagify(element, {whitelist:[],
+        pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})*$/,
+         dropdown: {
+            searchKeys: ["value", "name"] //  fuzzy-search matching for those whitelist items' properties
+         }
+       }),
+        controller;
+
+        function onInput( e ){
+            var value = e.detail.value
+              tagify.whitelist = null // reset the whitelist
+              // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
+              controller && controller.abort()
+              controller = new AbortController()
+              // show loading animation and hide the suggestions dropdown
+              tagify.loading(true);
+            fetch(url+'?value=' + value, {signal:controller.signal})
+                .then(RES => RES.json())
+                .then(function(newWhitelist){
+                  tagify.whitelist = newWhitelist // update whitelist Array in-place
+                  tagify.loading(false); // render the suggestions dropdown
+            })
+        }
+        tagify.on('input', onInput)
+    })
+}
+

djgentelella/static/gentelella/js/datatables.js

@@ -31,6 +31,16 @@ function formatDataTableParams(dataTableParams, settings){
 }
 
 var default_table_columns_display = {}
+function toggle_select_all(e){
+    let tinstance = $(e.target);
+    if(tinstance[0].checked){
+        tinstance.closest('table').find('.gtcheckable').prop('checked', true);
+        tinstance.closest('table').find('.checkableall').prop('checked', true);
+    }else{
+        tinstance.closest('table').find('.gtcheckable').prop('checked', false);
+        tinstance.closest('table').find('.checkableall').prop('checked', false);
+    }
+}
 function addSearchInputsAndFooterDataTable(dataTable, tableId, columns) {
     // takes care of adding the search inputs to each of the columns of the datatable, it will
     // hide/display them according to how the table changes in the responsive mode
@@ -45,7 +55,7 @@ function addSearchInputsAndFooterDataTable(dataTable, tableId, columns) {
     if($(tableId + ' thead tr').length < 2){  // clone the tr only if it wasn't cloned before
        $(tableId + ' thead tr').clone(false).appendTo(tableId + ' thead');
     }
-
+    let checkable_count=0;
     $(tableId + ' thead tr:eq(1) th').each(function (i) { // add search fields if they are not there already and the column is visible
         var currentColumn = dataTable.column(i);
         var is_display = true
@@ -54,7 +64,7 @@ function addSearchInputsAndFooterDataTable(dataTable, tableId, columns) {
         }
         var columnType = dataTable.settings()[0].aoColumns[i].type; // get the field type
         //currentColumn.responsiveHidden()
-        if (is_display && currentColumn.visible() && columnType !== 'actions') {  // column is visible
+        if (is_display && currentColumn.visible() && columnType !== 'actions' ) {  // column is visible
             $(this).css('display', ''); // when it was cloned it might have had display:none specified
             if($(this).find('input').length === 0 && $(this).find('select').length === 0) {  // add the input/select just if it doesn't exist already
                 var title = currentColumn.header().textContent;  // get the field name
@@ -127,10 +137,24 @@ function addSearchInputsAndFooterDataTable(dataTable, tableId, columns) {
             $(this).css('display', 'none');
         }
 
+        if(columnType === 'checkable'){
+             $(this).html("");
+             checkable_count=1;
+             if($(dataTable.context[0].nTable).data()['checkable']==undefined){
+                 $(dataTable.context[0].nTable).find('.checkableall').click(toggle_select_all);
+                 $(dataTable.context[0].nTable).data()['checkable']=true;
+             }
+        }
+
+
     });
     // add the footer to the table according to the current header - delete previous one before
     $(tableId).find('tfoot').remove();
     $(tableId).append($('<tfoot/>').append( $(tableId + " thead tr:eq(0)").clone()));
+    if(checkable_count>0){
+        $(tableId).children().last().find('.checkableall').click(toggle_select_all);
+        $(tableId).children().last().find('.checkableall').prop('width', 'unset');
+    }
 }
 
 function clearDataTableFilters(dataTable, tableId){

djgentelella/static/gentelella/js/obj_api_management.js

@@ -1,3 +1,10 @@
+function get_selected_items(dt, table){
+    let values = [];
+    $(table).find(".gtcheckable:checked").each(function() {
+        values.push(this.value);
+    });
+    return values;
+}
 function  gt_show_actions(crud_name){
      return function(data, type, row, meta){
         var html="";
@@ -352,6 +359,7 @@ function ObjectCRUD(uniqueid, objconfig={}){
         uls: null,
         datatable_element: null,
         modal_ids: null,
+        checkable: false,
         events: {
              'update_data': function(data){ return data; }
         },
@@ -406,6 +414,7 @@ function ObjectCRUD(uniqueid, objconfig={}){
         "can_update": config.modal_ids.hasOwnProperty("update"),
         "use_get_values_for_update": config.urls.hasOwnProperty("get_values_for_update_url"),
         "create_btn_class": config.btn_class.create,
+        "checkable": config.checkable,
         "datatable": null,
         "create_form": null,
         "update_form": null,
@@ -566,6 +575,23 @@ function ObjectCRUD(uniqueid, objconfig={}){
                      }
                 }
                 ]
+                if(this.checkable){
+                    config.datatable_inits['columnDefs'].push(
+                     {
+                        targets: 0,
+                        title: "Checkable",
+                        type: 'checkable',
+                        className: "no-export-col",
+                        orderable: false,
+                        render: function(data, type, full, meta){
+                            return '<input type="checkbox" class="gtcheckable" name="checkable" value="'+full.id+'" title="'+full.name+'"/>'
+                        }
+                    })
+
+                    config.datatable_inits.columns.unshift(
+                        {data: "id", name: "checkable", title: '<input type="checkbox" class="checkableall"> ', type: "checkable", visible: true}
+                    )
+                }
             }
          this.datatable = gtCreateDataTable(this.config.datatable_element, this.config.urls.list_url,
                                             this.config.datatable_inits);

djgentelella/static/gentelella/js/widgets.js

@@ -260,12 +260,10 @@ document.gtwidgets = {
     },
 
     TaggingInput: function (instance) {
-        instance.tagify();
+        build_tagginginput(instance);
     },
     EmailTaggingInput: function (instance) {
-        instance.tagify({
-            pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-        });
+        build_tagging_email(instance);
     },
     DJGraph: function (instance) {
         instance.gentelella_chart();
@@ -291,6 +289,9 @@ document.gtwidgets = {
     },
     UrlStoryLineInput: function (instance) {
         build_storyline(instance)
+    },
+    RemoteAutocompleteEmailTagifyWidget: function(instance){
+        build_remote_tagify_email(instance)
     }
 }
 

djgentelella/static/vendors/tagify/tagify.min.css

@@ -1 +1,7 @@
-:root{--tagify-dd-color-primary:rgb(53,149,246);--tagify-dd-bg-color:white}.tagify{--tags-border-color:#DDD;--tags-hover-border-color:#CCC;--tags-focus-border-color:#3595f6;--tag-bg:#E5E5E5;--tag-hover:#D3E2E2;--tag-text-color:black;--tag-text-color--edit:black;--tag-pad:0.3em 0.5em;--tag-inset-shadow-size:1.1em;--tag-invalid-color:#D39494;--tag-invalid-bg:rgba(211, 148, 148, 0.5);--tag-remove-bg:rgba(211, 148, 148, 0.3);--tag-remove-btn-color:black;--tag-remove-btn-bg:none;--tag-remove-btn-bg--hover:#c77777;--input-color:inherit;--tag--min-width:1ch;--tag--max-width:auto;--tag-hide-transition:.3s;--placeholder-color:rgba(0, 0, 0, 0.4);--placeholder-color-focus:rgba(0, 0, 0, 0.25);--loader-size:.8em;display:flex;align-items:flex-start;flex-wrap:wrap;border:1px solid #ddd;border:1px solid var(--tags-border-color);padding:0;line-height:1.1;cursor:text;outline:0;position:relative;transition:.1s}@keyframes tags--bump{30%{transform:scale(1.2)}}@keyframes rotateLoader{to{transform:rotate(1turn)}}.tagify:hover{border-color:#ccc;border-color:var(--tags-hover-border-color)}.tagify.tagify--focus{transition:0s;border-color:#3595f6;border-color:var(--tags-focus-border-color)}.tagify[readonly]:not(.tagify--mix){cursor:default}.tagify[readonly]:not(.tagify--mix)>.tagify__input{visibility:hidden;width:0;margin:5px 0}.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn{display:none}.tagify[readonly]:not(.tagify--mix) .tagify__tag>div{padding:.3em .5em;padding:var(--tag-pad)}.tagify[readonly]:not(.tagify--mix) .tagify__tag>div::before{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}.tagify--loading .tagify__input::before{content:none}.tagify--loading .tagify__input::after{content:'';vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;animation:rotateLoader .4s infinite linear;margin:-2px 0 -2px .5em}.tagify--loading .tagify__input:empty::after{margin-left:0}.tagify+input,.tagify+textarea{display:none!important}.tagify__tag{display:inline-flex;align-items:center;margin:5px 0 5px 5px;position:relative;z-index:1;outline:0;cursor:default;transition:.13s ease-out}.tagify__tag>div{vertical-align:top;box-sizing:border-box;max-width:100%;padding:.3em .5em;padding:var(--tag-pad);color:#000;color:var(--tag-text-color);line-height:inherit;border-radius:3px;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:.13s ease-out}.tagify__tag>div>*{white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:top;min-width:var(--tag--min-width);max-width:var(--tag--max-width);transition:.8s ease,.1s color}.tagify__tag>div>[contenteditable]{outline:0;-webkit-user-select:text;user-select:text;cursor:text;margin:-2px;padding:2px;max-width:350px}.tagify__tag>div::before{content:'';position:absolute;border-radius:inherit;left:0;top:0;right:0;bottom:0;z-index:-1;pointer-events:none;transition:120ms ease;animation:tags--bump .3s ease-out 1;box-shadow:0 0 0 1.1em #e5e5e5 inset;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset}.tagify__tag:hover:not([readonly]) div::before{top:-2px;right:-2px;bottom:-2px;left:-2px;box-shadow:0 0 0 1.1em #d3e2e2 inset;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-hover) inset}.tagify__tag--loading{pointer-events:none}.tagify__tag--loading .tagify__tag__removeBtn{display:none}.tagify__tag--loading::after{--loader-size:.4em;content:'';vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;animation:rotateLoader .4s infinite linear;margin:0 .5em 0 -.1em}.tagify__tag--flash div::before{animation:none}.tagify__tag--hide{width:0!important;padding-left:0;padding-right:0;margin-left:0;margin-right:0;opacity:0;transform:scale(0);transition:.3s;transition:var(--tag-hide-transition);pointer-events:none}.tagify__tag.tagify--noAnim>div::before{animation:none}.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span{opacity:.5}.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{box-shadow:0 0 0 1.1em rgba(211,148,148,.5) inset!important;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-invalid-bg) inset!important;transition:.2s}.tagify__tag[readonly] .tagify__tag__removeBtn{display:none}.tagify__tag[readonly]>div::before{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}.tagify__tag--editable>div{color:#000;color:var(--tag-text-color--edit)}.tagify__tag--editable>div::before{box-shadow:0 0 0 2px #d3e2e2 inset!important;box-shadow:0 0 0 2px var(--tag-hover) inset!important}.tagify__tag--editable.tagify--invalid>div::before{box-shadow:0 0 0 2px #d39494 inset!important;box-shadow:0 0 0 2px var(--tag-invalid-color) inset!important}.tagify__tag__removeBtn{order:5;display:inline-flex;align-items:center;justify-content:center;border-radius:50px;cursor:pointer;font:14px/1 Arial;background:0 0;background:var(--tag-remove-btn-bg);color:#000;color:var(--tag-remove-btn-color);width:14px;height:14px;margin-right:4.66667px;margin-left:-4.66667px;transition:.2s ease-out}.tagify__tag__removeBtn::after{content:"\00D7"}.tagify__tag__removeBtn:hover{color:#fff;background:#c77777;background:var(--tag-remove-btn-bg--hover)}.tagify__tag__removeBtn:hover+div>span{opacity:.5}.tagify__tag__removeBtn:hover+div::before{box-shadow:0 0 0 1.1em rgba(211,148,148,.3) inset!important;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset!important;transition:.2s}.tagify:not(.tagify--mix) .tagify__input br{display:none}.tagify:not(.tagify--mix) .tagify__input *{display:inline;white-space:nowrap}.tagify__input{flex-grow:1;display:inline-block;min-width:110px;margin:5px;padding:.3em .5em;padding:var(--tag-pad,.3em .5em);line-height:inherit;position:relative;white-space:pre-wrap;color:inherit;color:var(--input-color)}.tagify__input:empty::before{transition:.2s ease-out;opacity:1;transform:none;display:inline-block;width:auto}.tagify--mix .tagify__input:empty::before{display:inline-block}.tagify__input:focus{outline:0}.tagify__input:focus::before{transition:.2s ease-out;opacity:0;transform:translatex(6px)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.tagify__input:focus::before{display:none}}@supports (-ms-ime-align:auto){.tagify__input:focus::before{display:none}}.tagify__input:focus:empty::before{transition:.2s ease-out;opacity:1;transform:none;color:rgba(0,0,0,.25);color:var(--placeholder-color-focus)}@-moz-document url-prefix(){.tagify__input:focus:empty::after{display:none}}.tagify__input::before{content:attr(data-placeholder);height:1em;line-height:1em;margin:auto 0;z-index:1;color:rgba(0,0,0,.4);color:var(--placeholder-color);white-space:nowrap;pointer-events:none;opacity:0;position:absolute}.tagify--mix .tagify__input::before{display:none;position:static;line-height:inherit}.tagify__input::after{content:attr(data-suggest);display:inline-block;white-space:pre;color:#000;opacity:.3;pointer-events:none;max-width:100px}.tagify__input .tagify__tag{margin:0}.tagify__input .tagify__tag>div{padding-top:0;padding-bottom:0}.tagify--mix{display:block}.tagify--mix .tagify__input{padding:5px;margin:0;width:100%;height:100%;line-height:1.5}.tagify--mix .tagify__input::before{height:auto}.tagify--mix .tagify__input::after{content:none}.tagify--select::after{content:'>';opacity:.5;position:absolute;top:50%;right:0;bottom:0;font:16px monospace;line-height:8px;height:8px;pointer-events:none;transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);transition:.2s ease-in-out}.tagify--select[aria-expanded=true]::after{transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)}.tagify--select .tagify__tag{position:absolute;top:0;right:1.8em;bottom:0}.tagify--select .tagify__tag div{display:none}.tagify--select .tagify__input{width:100%}.tagify--invalid{--tags-border-color:#D39494}.tagify__dropdown{position:absolute;z-index:9999;transform:translateY(1px);overflow:hidden}.tagify__dropdown[placement=top]{margin-top:0;transform:translateY(-100%)}.tagify__dropdown[placement=top] .tagify__dropdown__wrapper{border-top-width:1px;border-bottom-width:0}.tagify__dropdown[position=text]{box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);font-size:.9em}.tagify__dropdown[position=text] .tagify__dropdown__wrapper{border-width:1px}.tagify__dropdown__wrapper{max-height:300px;overflow:hidden;background:#fff;background:var(--tagify-dd-bg-color);border:1px solid #3595f6;border-color:var(--tagify-dd-color-primary);border-top-width:0;box-shadow:0 2px 4px -2px rgba(0,0,0,.2);transition:.25s cubic-bezier(0,1,.5,1)}.tagify__dropdown__wrapper:hover{overflow:auto}.tagify__dropdown--initial .tagify__dropdown__wrapper{max-height:20px;transform:translateY(-1em)}.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper{transform:translateY(2em)}.tagify__dropdown__item{box-sizing:inherit;padding:.3em .5em;margin:1px;cursor:pointer;border-radius:2px;position:relative;outline:0}.tagify__dropdown__item--active{background:#3595f6;background:var(--tagify-dd-color-primary);color:#fff}.tagify__dropdown__item:active{filter:brightness(105%)}
+/**
+ * Skipped minification because the original files appears to be already minified.
+ * Original file: /npm/@yaireo/tagify@4.33.2/dist/tagify.css
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+@charset "UTF-8";:root{--tagify-dd-color-primary:rgb(53,149,246);--tagify-dd-text-color:black;--tagify-dd-bg-color:white;--tagify-dd-item-pad:.3em .5em;--tagify-dd-max-height:300px}.tagify{--tags-disabled-bg:#F1F1F1;--tags-border-color:#DDD;--tags-hover-border-color:#CCC;--tags-focus-border-color:#3595f6;--tag-border-radius:3px;--tag-bg:#E5E5E5;--tag-hover:#D3E2E2;--tag-text-color:black;--tag-text-color--edit:black;--tag-pad:0.3em 0.5em;--tag-inset-shadow-size:1.2em;--tag-invalid-color:#D39494;--tag-invalid-bg:rgba(211, 148, 148, 0.5);--tag--min-width:1ch;--tag--max-width:100%;--tag-hide-transition:0.3s;--tag-remove-bg:rgba(211, 148, 148, 0.3);--tag-remove-btn-color:black;--tag-remove-btn-bg:none;--tag-remove-btn-bg--hover:#c77777;--input-color:inherit;--placeholder-color:rgba(0, 0, 0, 0.4);--placeholder-color-focus:rgba(0, 0, 0, 0.25);--loader-size:.8em;--readonly-striped:1;display:inline-flex;align-items:flex-start;flex-wrap:wrap;border:1px solid var(--tags-border-color);padding:0;line-height:0;outline:0;position:relative;box-sizing:border-box;transition:.1s}@keyframes tags--bump{30%{transform:scale(1.2)}}@keyframes rotateLoader{to{transform:rotate(1turn)}}.tagify:has([contenteditable=true]){cursor:text}.tagify:hover:not(.tagify--focus):not(.tagify--invalid){--tags-border-color:var(--tags-hover-border-color)}.tagify[disabled]{background:var(--tags-disabled-bg);filter:saturate(0);opacity:.5;pointer-events:none}.tagify[disabled].tagify--select,.tagify[readonly].tagify--select{pointer-events:none}.tagify[disabled]:not(.tagify--mix):not(.tagify--select),.tagify[readonly]:not(.tagify--mix):not(.tagify--select){cursor:default}.tagify[disabled]:not(.tagify--mix):not(.tagify--select)>.tagify__input,.tagify[readonly]:not(.tagify--mix):not(.tagify--select)>.tagify__input{visibility:hidden;width:0;margin:5px 0}.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div,.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div{padding:var(--tag-pad)}.tagify[disabled]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before,.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before{animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused}@keyframes readonlyStyles{0%{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}}.tagify[disabled] .tagify__tag__removeBtn,.tagify[readonly] .tagify__tag__removeBtn{display:none}.tagify--loading .tagify__input>br:last-child{display:none}.tagify--loading .tagify__input::before{content:none}.tagify--loading .tagify__input::after{content:"";vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);min-width:0;border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;animation:rotateLoader .4s infinite linear;content:""!important;margin:-2px 0 -2px .5em}.tagify--loading .tagify__input:empty::after{margin-left:0}.tagify+input,.tagify+textarea{position:absolute!important;left:-9999em!important;transform:scale(0)!important}.tagify__tag{display:inline-flex;align-items:center;max-width:var(--tag--max-width);margin-inline:5px 0;margin-block:5px;position:relative;z-index:1;outline:0;line-height:normal;cursor:default;transition:.13s ease-out}.tagify__tag>div{display:flex;flex:1;vertical-align:top;box-sizing:border-box;max-width:100%;padding:var(--tag-pad);color:var(--tag-text-color);line-height:inherit;border-radius:var(--tag-border-radius);white-space:nowrap;transition:.13s ease-out}.tagify__tag>div>*{white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:top;min-width:var(--tag--min-width);max-width:var(--tag--max-width);transition:.8s ease,.1s color}.tagify__tag>div>[contenteditable]{display:block;outline:0;-webkit-user-select:text;user-select:text;cursor:text;margin:-2px;padding:2px;max-width:350px}.tagify__tag>div>:only-child{width:100%}.tagify__tag>div::before{content:"";position:absolute;border-radius:inherit;inset:var(--tag-bg-inset,0);z-index:-1;pointer-events:none;transition:120ms ease;animation:tags--bump .3s ease-out 1;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset}.tagify__tag:focus div::before,.tagify__tag:hover:not([readonly]) div::before{--tag-bg-inset:-2.5px;--tag-bg:var(--tag-hover)}.tagify__tag--loading{pointer-events:none}.tagify__tag--loading .tagify__tag__removeBtn{display:none}.tagify__tag--loading::after{--loader-size:.4em;content:"";vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);min-width:0;border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;animation:rotateLoader .4s infinite linear;margin:0 .5em 0 -.1em}.tagify__tag--flash div::before{animation:none}.tagify__tag--hide{width:0!important;padding-left:0;padding-right:0;margin-left:0;margin-right:0;opacity:0;transform:scale(0);transition:var(--tag-hide-transition);pointer-events:none}.tagify__tag--hide>div>*{white-space:nowrap}.tagify__tag.tagify--noAnim>div::before{animation:none}.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span{opacity:.5}.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{--tag-bg:var(--tag-invalid-bg);transition:.2s}.tagify__tag[readonly] .tagify__tag__removeBtn{display:none}.tagify__tag[readonly]>div::before{animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused}@keyframes readonlyStyles{0%{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}}.tagify__tag--editable>div{color:var(--tag-text-color--edit)}.tagify__tag--editable>div::before{box-shadow:0 0 0 2px var(--tag-hover) inset!important}.tagify__tag--editable>.tagify__tag__removeBtn{pointer-events:none;opacity:0;transform:translateX(100%) translateX(5px)}.tagify__tag--editable.tagify--invalid>div::before{box-shadow:0 0 0 2px var(--tag-invalid-color) inset!important}.tagify__tag__removeBtn{order:5;display:inline-flex;align-items:center;justify-content:center;border-radius:50px;cursor:pointer;font:14px/1 Arial;background:var(--tag-remove-btn-bg);color:var(--tag-remove-btn-color);width:14px;height:14px;margin-inline:auto 4.6666666667px;overflow:hidden;transition:.2s ease-out}.tagify__tag__removeBtn::after{content:"×";transition:.3s,color 0s}.tagify__tag__removeBtn:hover{color:#fff;background:var(--tag-remove-btn-bg--hover)}.tagify__tag__removeBtn:hover+div>span{opacity:.5}.tagify__tag__removeBtn:hover+div::before{box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;transition:box-shadow .2s}.tagify:not(.tagify--mix) .tagify__input br{display:none}.tagify:not(.tagify--mix) .tagify__input *{display:inline;white-space:nowrap}.tagify__input{flex-grow:1;display:inline-block;min-width:110px;margin:5px;padding:var(--tag-pad);line-height:normal;position:relative;white-space:pre-wrap;color:var(--input-color);box-sizing:inherit;overflow:hidden}.tagify__input:focus{outline:0}.tagify__input:focus::before{transition:.2s ease-out;opacity:0;transform:translatex(6px)}@supports (-ms-ime-align:auto){.tagify__input:focus::before{display:none}}.tagify__input:focus:empty::before{transition:.2s ease-out;opacity:1;transform:none;color:rgba(0,0,0,.25);color:var(--placeholder-color-focus)}@-moz-document url-prefix(){.tagify__input:focus:empty::after{display:none}}.tagify__input::before{content:attr(data-placeholder);width:100%;height:100%;margin:auto 0;z-index:1;color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none;opacity:0;position:absolute}.tagify__input::after{content:attr(data-suggest);display:inline-block;vertical-align:middle;position:absolute;min-width:calc(100% - 1.5em);text-overflow:ellipsis;overflow:hidden;white-space:pre;color:var(--tag-text-color);opacity:.3;pointer-events:none;max-width:100px}.tagify__input .tagify__tag{margin:0 1px}.tagify--mix{display:block}.tagify--mix .tagify__input{padding:5px;margin:0;width:100%;height:100%;line-height:1.5;display:block}.tagify--mix .tagify__input::before{height:auto;display:none;line-height:inherit}.tagify--mix .tagify__input::after{content:none}.tagify--select{cursor:default}.tagify--select::after{content:">";opacity:.5;position:absolute;top:50%;right:0;bottom:0;font:16px monospace;line-height:8px;height:8px;pointer-events:none;transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);transition:.2s ease-in-out}.tagify--select[aria-expanded=true]::after{transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)}.tagify--select[aria-expanded=true] .tagify__tag__removeBtn{pointer-events:none;opacity:0;transform:translateX(100%) translateX(5px)}.tagify--select .tagify__tag{flex:1;max-width:none;margin-inline-end:2em;margin-block:0;padding-block:5px;cursor:text}.tagify--select .tagify__tag div::before{display:none}.tagify--select .tagify__tag+.tagify__input{display:none}.tagify--empty .tagify__input::before{transition:.2s ease-out;opacity:1;transform:none;display:inline-block;width:auto}.tagify--mix .tagify--empty .tagify__input::before{display:inline-block}.tagify--focus{--tags-border-color:var(--tags-focus-border-color);transition:0s}.tagify--invalid{--tags-border-color:#D39494}.tagify__dropdown{position:absolute;z-index:9999;transform:translateY(-1px);border-top:1px solid var(--tagify-dd-color-primary);overflow:hidden}.tagify__dropdown[dir=rtl]{transform:translate(-100%,-1px)}.tagify__dropdown[placement=top]{margin-top:0;transform:translateY(-100%)}.tagify__dropdown[placement=top] .tagify__dropdown__wrapper{border-top-width:1.1px;border-bottom-width:0}.tagify__dropdown[position=text]{box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);font-size:.9em}.tagify__dropdown[position=text] .tagify__dropdown__wrapper{border-width:1px}.tagify__dropdown__wrapper{scroll-behavior:auto;max-height:var(--tagify-dd-max-height);overflow:hidden;overflow-x:hidden;color:var(--tagify-dd-text-color);background:var(--tagify-dd-bg-color);border:1px solid;border-color:var(--tagify-dd-color-primary);border-bottom-width:1.5px;border-top-width:0;box-shadow:0 2px 4px -2px rgba(0,0,0,.2);transition:.3s cubic-bezier(.5,0,.3,1),transform .15s;animation:dd-wrapper-show 0s .3s forwards}@keyframes dd-wrapper-show{to{overflow-y:auto}}.tagify__dropdown__header:empty{display:none}.tagify__dropdown__footer{display:inline-block;margin-top:.5em;padding:var(--tagify-dd-item-pad);font-size:.7em;font-style:italic;opacity:.5}.tagify__dropdown__footer:empty{display:none}.tagify__dropdown--initial .tagify__dropdown__wrapper{max-height:20px;transform:translateY(-1em)}.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper{transform:translateY(2em)}.tagify__dropdown__item{box-sizing:border-box;padding:var(--tagify-dd-item-pad);margin:1px;white-space:pre-wrap;cursor:pointer;border-radius:2px;position:relative;outline:0;max-height:60px;max-width:100%;line-height:normal;position:relative}.tagify__dropdown__item--active{background:var(--tagify-dd-color-primary);color:#fff}.tagify__dropdown__item:active{filter:brightness(105%)}.tagify__dropdown__item--hidden{padding-top:0;padding-bottom:0;margin:0 1px;pointer-events:none;overflow:hidden;max-height:0;transition:var(--tagify-dd-item--hidden-duration,.3s)!important}.tagify__dropdown__item--hidden>*{transform:translateY(-100%);opacity:0;transition:inherit}.tagify__dropdown__item--selected::before{content:"✓";font-family:monospace;position:absolute;inset-inline-start:6px;text-indent:0;line-height:1.1}.tagify__dropdown:has(.tagify__dropdown__item--selected) .tagify__dropdown__item{text-indent:1em}