@blockly/field-grid-dropdown/dist/index.js

A Blockly dropdown field with grid layout.

/*! For license information please see index.js.LICENSE.txt */
!function(o,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("blockly/core"));else if("function"==typeof define&&define.amd)define(["blockly/core"],e);else{var r="object"==typeof exports?e(require("blockly/core")):e(o.Blockly);for(var n in r)("object"==typeof exports?exports:o)[n]=r[n]}}(this,(o=>(()=>{"use strict";var e={370:e=>{e.exports=o}},r={};function n(o){var t=r[o];if(void 0!==t)return t.exports;var i=r[o]={exports:{}};return e[o](i,i.exports,n),i.exports}n.n=o=>{var e=o&&o.__esModule?()=>o.default:()=>o;return n.d(e,{a:e}),e},n.d=(o,e)=>{for(var r in e)n.o(e,r)&&!n.o(o,r)&&Object.defineProperty(o,r,{enumerable:!0,get:e[r]})},n.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),n.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})};var t={};n.r(t),n.d(t,{FieldGridDropdown:()=>l});var i=n(370);class l extends i.FieldDropdown{constructor(o,e,r){super(o,e,r),this.columns=3,(null==r?void 0:r.columns)&&this.setColumnsInternal(r.columns),r&&r.primaryColour&&(this.primaryColour=r.primaryColour),r&&r.borderColour&&(this.borderColour=r.borderColour)}static fromJson(o){if(!o.options)throw new Error("options are required for the dropdown field. The options property must be assigned an array of [humanReadableValue, languageNeutralValue] tuples.");return new this(o.options,void 0,o)}setColumns(o){this.setColumnsInternal(o),this.updateColumnsStyling_()}setColumnsInternal(o){const e="string"==typeof o?parseInt(o):o;!isNaN(e)&&e>=1&&(this.columns=e)}showEditor_(o){var e,r;super.showEditor_(o);const n=this.getColours();n&&n.border&&i.DropDownDiv.setColour(n.primary,n.border);const t=null!==(r=null===(e=this.menu_)||void 0===e?void 0:e.getElement())&&void 0!==r?r:null;t&&i.utils.dom.addClass(t,"fieldGridDropDownContainer"),this.updateColumnsStyling_(),i.DropDownDiv.showPositionedByField(this,this.dropdownDispose_.bind(this))}updateColumnsStyling_(){const o=this.menu_?this.menu_.getElement():null;o&&(o.style.gridTemplateColumns=`repeat(${this.columns}, min-content)`)}getColours(){var o,e;if(this.primaryColour&&this.borderColour)return{primary:this.primaryColour,border:this.borderColour};const r=this.getSourceBlock();if(!(r instanceof i.BlockSvg))return;const n=r.isShadow()?r.getParent():r;return n?{primary:null!==(o=this.primaryColour)&&void 0!==o?o:n.getColour(),border:null!==(e=this.borderColour)&&void 0!==e?e:n.getColourTertiary()}:void 0}}return i.fieldRegistry.register("field_grid_dropdown",l),i.Css.register("\n /** Setup grid layout of DropDown */\n .fieldGridDropDownContainer.blocklyMenu {\n   display: grid;\n   grid-gap: 7px;\n   }\n /* Change look of cells (add border, sizing, padding, and text color) */\n .fieldGridDropDownContainer.blocklyMenu .blocklyMenuItem {\n   border: 1px solid rgba(1, 1, 1, 0.5);\n   border-radius: 4px;\n   color: white;\n   min-width: auto;\n   padding-left: 15px; /* override padding-left now that checkmark is hidden */\n }\n /* Change look of selected cell */\n .fieldGridDropDownContainer .blocklyMenuItem .blocklyMenuItemCheckbox {\n   display: none; /* Hide checkmark */\n }\n .fieldGridDropDownContainer .blocklyMenuItem.blocklyMenuItemSelected {\n   background-color: rgba(1, 1, 1, 0.25);\n }\n /* Change look of focus/highlighted cell */\n .fieldGridDropDownContainer .blocklyMenuItem.blocklyMenuItemHighlight {\n   box-shadow: 0 0 0 4px hsla(0, 0%, 100%, .2);\n }\n .fieldGridDropDownContainer .blocklyMenuItemHighlight {\n   /* Uses less selectors so as to not affect blocklyMenuItemSelected */\n   background-color: inherit;\n }\n .fieldGridDropDownContainer {\n   margin: 7px; /* needed for highlight */\n }\n "),t})()));
//# sourceMappingURL=index.js.map