{"version":3,"sources":["webpack:///./node_modules/@ckeditor/ckeditor5-font/src/ui/colortableview.js","webpack:///./node_modules/@ckeditor/ckeditor5-font/src/utils.js","webpack:///./node_modules/@ckeditor/ckeditor5-font/src/ui/colorui.js"],"names":["ColorTableView","locale","_ref","_this","colors","columns","removeButtonLabel","documentColorsLabel","documentColorsCount","Object","classCallCheck","this","_super","call","items","createCollection","colorDefinitions","focusTracker","FocusTracker","keystrokes","KeystrokeHandler","set","documentColors","DocumentColorCollection","_focusCycler","FocusCycler","focusables","keystrokeHandler","actions","focusPrevious","focusNext","_documentColorsLabel","setTemplate","tag","attributes","class","children","add","_removeColorButton","model","attributeName","document","maxCount","clear","_step","_iterator","_createForOfIteratorHelper","getRootNames","s","n","done","_step2","rootName","value","root","getRoot","range","createRangeIn","_iterator2","getItems","node","is","hasAttribute","_addColorToDocumentColors","getAttribute","length","err","e","f","documentColorsGrid","staticColorsGrid","selectedColor","get","getPrototypeOf","prototype","_step3","_iterator3","item","element","listenTo","_createStaticColorsGrid","bind","Template","label","LabelView","text","extendTemplate","if","_createDocumentColorsGrid","focusFirst","focusLast","_this2","buttonView","ButtonView","withText","icon","icons","eraser","tooltip","on","fire","colorGrid","ColorGridView","delegate","to","_this3","bindTo","using","colorObj","colorTile","ColorTileView","color","hasBorder","options","evt","name","val","predefinedColor","find","definition","assign","View","FONT_SIZE","FONT_COLOR","buildDefinition","modelAttributeKey","key","values","view","upcastAlso","utils_createForOfIteratorHelper","option","push","renderUpcastAttribute","styleAttr","viewElement","normalizeColorCode","getStyle","renderDowncastElement","modelAttributeValue","writer","createAttributeElement","style","concat","priority","addColorTableToDropdown","_ref2","dropdownView","colorTableView","panelView","replace","ColorUI","editor","commandName","componentName","dropdownLabel","D_Projects_UA_repo_Source_Client_UA_User_Web_node_modules_babel_runtime_helpers_esm_classCallCheck_js__WEBPACK_IMPORTED_MODULE_1__","config","undefined","t","command","commands","colorsConfig","normalizeColorOptions","localizedColors","getLocalizedColorOptions","ui","componentFactory","createDropdown","map","data","execute","editing","focus","isVisible","appendGrids","updateDocumentColors","updateSelectedColors","Plugin"],"mappings":";;;;OA0BqBA,6CAapB,SAAAA,EAAaC,EAAbC,GAAwG,IAAAC,EAAjFC,EAAiFF,EAAjFE,OAAQC,EAAyEH,EAAzEG,QAASC,EAAgEJ,EAAhEI,kBAAmBC,EAA6CL,EAA7CK,oBAAqBC,EAAwBN,EAAxBM,oBAAwB,OAAAC,OAAAC,EAAA,KAAAD,CAAAE,KAAAX,GACvGG,EAAAS,EAAAC,KAAAF,KAAOV,GAQPE,EAAKW,MAAQX,EAAKY,mBAOlBZ,EAAKa,iBAAmBZ,EAQxBD,EAAKc,aAAe,IAAIC,OAQxBf,EAAKgB,WAAa,IAAIC,OAOtBjB,EAAKkB,IAAK,iBAOVlB,EAAKG,kBAAoBA,EAOzBH,EAAKE,QAAUA,EAQfF,EAAKmB,eAAiB,IAAIC,OAS1BpB,EAAKK,oBAAsBA,EA6B3BL,EAAKqB,aAAe,IAAIC,QACvBC,WAAYvB,EAAKW,MACjBG,aAAcd,EAAKc,aACnBU,iBAAkBxB,EAAKgB,WACvBS,SAECC,cAAe,UAGfC,UAAW,eAWb3B,EAAK4B,qBAAuBxB,EAE5BJ,EAAK6B,aACJC,IAAK,MACLC,YACCC,OACC,KACA,mBAGFC,SAAUjC,EAAKW,QAGhBX,EAAKW,MAAMuB,IAAKlC,EAAKmC,sBApIkFnC,6DAgJxG,SAAsBoC,EAAOC,GAC5B,IAAMC,EAAWF,EAAME,SACjBC,EAAW/B,KAAKH,oBAEtBG,KAAKW,eAAeqB,QAJwB,IAAAC,EAAAC,EAAAC,EAMpBL,EAASM,gBANW,IAM5C,IAAAF,EAAAG,MAAAJ,EAAAC,EAAAI,KAAAC,MAAkD,KAAAC,EAAtCC,EAAsCR,EAAAS,MAC3CC,EAAOb,EAASc,QAASH,GACzBI,EAAQjB,EAAMkB,cAAeH,GAFcI,EAAAZ,EAI7BU,EAAMG,YAJuB,IAIjD,IAAAD,EAAAV,MAAAG,EAAAO,EAAAT,KAAAC,MAAuC,KAA3BU,EAA2BT,EAAAE,MACtC,GAAKO,EAAKC,GAAI,eAAkBD,EAAKE,aAActB,KAClD7B,KAAKoD,0BAA2BH,EAAKI,aAAcxB,IAE9C7B,KAAKW,eAAe2C,QAAUvB,GAClC,QAT8C,MAAAwB,GAAAR,EAAAS,EAAAD,GAAA,QAAAR,EAAAU,MANN,MAAAF,GAAArB,EAAAsB,EAAAD,GAAA,QAAArB,EAAAuB,yCA2B7C,WACC,IAAMC,EAAqB1D,KAAK0D,mBAC1BC,EAAmB3D,KAAK2D,iBACxBC,EAAgB5D,KAAK4D,cAE3BD,EAAiBC,cAAgBA,EAE5BF,IACJA,EAAmBE,cAAgBA,yBAOrC,WACC9D,OAAA+D,EAAA,KAAA/D,QAAAgE,EAAA,KAAAhE,CAAAT,EAAA0E,WAAA,SAAA/D,MAAAE,KAAAF,MADQ,IAAAgE,EAAAC,EAAA9B,EAIYnC,KAAKG,OAJjB,IAIR,IAAA8D,EAAA5B,MAAA2B,EAAAC,EAAA3B,KAAAC,MAAiC,KAArB2B,EAAqBF,EAAAtB,MAChC1C,KAAKM,aAAaoB,IAAKwC,EAAKC,UALrB,MAAAZ,GAAAU,EAAAT,EAAAD,GAAA,QAAAU,EAAAR,IASRzD,KAAKQ,WAAW4D,SAAUpE,KAAKmE,oCAMhC,WACC,IAAKnE,KAAK2D,mBAIV3D,KAAK2D,iBAAmB3D,KAAKqE,0BAE7BrE,KAAKG,MAAMuB,IAAK1B,KAAK2D,kBAEhB3D,KAAKH,qBAAsB,CAE/B,IAAMyE,EAAOC,OAASD,KAAMtE,KAAKW,eAAgBX,KAAKW,gBAChD6D,EAAQ,IAAIC,OAAWzE,KAAKV,QAClCkF,EAAME,KAAO1E,KAAKoB,qBAClBoD,EAAMG,gBACLpD,YACCC,OACC,KACA,uBACA8C,EAAKM,GAAI,UAAW,iBAIvB5E,KAAKG,MAAMuB,IAAK8C,GAChBxE,KAAK0D,mBAAqB1D,KAAK6E,4BAC/B7E,KAAKG,MAAMuB,IAAK1B,KAAK0D,0CAOvB,WACC1D,KAAKa,aAAaiE,sCAMnB,WACC9E,KAAKa,aAAakE,8CASnB,WAAqB,IAAAC,EAAAhF,KACdiF,EAAa,IAAIC,OAcvB,OAZAD,EAAWvE,KACVyE,UAAU,EACVC,KAAMC,OAAMC,OACZC,SAAS,EACTf,MAAOxE,KAAKL,oBAGbsF,EAAWzD,MAAQ,+BACnByD,EAAWO,GAAI,UAAW,WACzBR,EAAKS,KAAM,WAAa/C,MAAO,SAGzBuC,yCASR,WACC,IAAMS,EAAY,IAAIC,OAAe3F,KAAKV,QACzCe,iBAAkBL,KAAKK,iBACvBX,QAASM,KAAKN,UAKf,OAFAgG,EAAUE,SAAU,WAAYC,GAAI7F,MAE7B0F,2CASR,WAA4B,IAAAI,EAAA9F,KACrBsE,EAAOC,OAASD,KAAMtE,KAAKW,eAAgBX,KAAKW,gBAChD+C,EAAqB,IAAIiC,OAAe3F,KAAKV,QAClDI,QAASM,KAAKN,UA4Cf,OAzCAgE,EAAmBkC,SAAU,WAAYC,GAAI7F,MAE7C0D,EAAmBiB,gBAClBpD,YACCC,MAAO8C,EAAKM,GAAI,UAAW,gBAI7BlB,EAAmBvD,MAAM4F,OAAQ/F,KAAKW,gBAAiBqF,MACtD,SAAAC,GACC,IAAMC,EAAY,IAAIC,OAoBtB,OAlBAD,EAAUxF,KACT0F,MAAOH,EAASG,MAChBC,UAAWJ,EAASK,SAAWL,EAASK,QAAQD,YAG5CJ,EAASzB,OACb0B,EAAUxF,KACT8D,MAAOyB,EAASzB,MAChBe,SAAS,IAIXW,EAAUV,GAAI,UAAW,WACxBM,EAAKL,KAAM,WACV/C,MAAOuD,EAASG,UAIXF,IAKTlG,KAAKW,eAAe6E,GAAI,iBAAkB,SAAEe,EAAKC,EAAMC,GACjDA,IACJ/C,EAAmBE,cAAgB,QAI9BF,2CAUR,SAA2B0C,GAC1B,IAAMM,EAAkB1G,KAAKK,iBAC3BsG,KAAM,SAAAC,GAAU,OAAIA,EAAWR,QAAUA,IAErCM,EASL1G,KAAKW,eAAee,IAAK5B,OAAO+G,UAAYH,IAR5C1G,KAAKW,eAAee,KACnB0E,QACA5B,MAAO4B,EACPE,SACCD,WAAW,YAlX4BS;;;;GCZrC,IAAMC,EAAY,WAUZC,EAAa,YAcnB,SAASC,EAAiBC,EAAmBZ,GACnD,IAD6DrE,EACvD2E,GACLhF,OACCuF,IAAKD,EACLE,WAEDC,QACAC,eAP4DpF,EAAAqF,EAUvCjB,GAVuC,IAU7D,IAAApE,EAAAG,MAAAJ,EAAAC,EAAAI,KAAAC,MAAgC,KAApBiF,EAAoBvF,EAAAS,MAC/BkE,EAAWhF,MAAMwF,OAAOK,KAAMD,EAAO5F,OACrCgF,EAAWS,KAAMG,EAAO5F,OAAU4F,EAAOH,KAEpCG,EAAOF,aACXV,EAAWU,WAAYE,EAAO5F,OAAU4F,EAAOF,aAfY,MAAA/D,GAAArB,EAAAsB,EAAAD,GAAA,QAAArB,EAAAuB,IAmB7D,OAAOmD,EAaD,SAASc,EAAuBC,GACtC,OAAO,SAAAC,GAAW,OAAIC,EAAoBD,EAAYE,SAAUH,KAY1D,SAASI,EAAuBJ,GACtC,OAAO,SAAEK,EAAFzI,GAAA,IAAyB0I,EAAzB1I,EAAyB0I,OAAzB,OAAuCA,EAAOC,uBAAwB,QAC5EC,MAAK,GAAAC,OAAMT,EAAN,KAAAS,OAAqBJ,KACtBK,SAAU,KAgBT,SAASC,EAATC,GAAmI,IAA/FC,EAA+FD,EAA/FC,aAAc/I,EAAiF8I,EAAjF9I,OAAQC,EAAyE6I,EAAzE7I,QAASC,EAAgE4I,EAAhE5I,kBAAmBC,EAA6C2I,EAA7C3I,oBAAqBC,EAAwB0I,EAAxB1I,oBAC3GP,EAASkJ,EAAalJ,OACtBmJ,EAAiB,IAAIpJ,EAAgBC,GAAUG,SAAQC,UAASC,oBAAmBC,sBAAqBC,wBAO9G,OALA2I,EAAaC,eAAiBA,EAC9BD,EAAaE,UAAUjH,SAASC,IAAK+G,GAErCA,EAAe7C,SAAU,WAAYC,GAAI2C,EAAc,WAEhDC,EAOR,SAASZ,EAAoBnF,GAC5B,OAAOA,EAAMiG,QAAS,MAAO;;;;OCjGTC,6CAYpB,SAAAA,EAAaC,EAAbtJ,GAA2E,IAAAC,EAApDsJ,EAAoDvJ,EAApDuJ,YAAa1D,EAAuC7F,EAAvC6F,KAAM2D,EAAiCxJ,EAAjCwJ,cAAeC,EAAkBzJ,EAAlByJ,cAAkB,OAAAlJ,OAAAmJ,EAAA,KAAAnJ,CAAAE,KAAA4I,GAC1EpJ,EAAAS,EAAAC,KAAAF,KAAO6I,GAOPrJ,EAAKsJ,YAAcA,EAQnBtJ,EAAKuJ,cAAgBA,EAMrBvJ,EAAK4F,KAAOA,EAOZ5F,EAAKwJ,cAAgBA,EAOrBxJ,EAAKE,QAAUmJ,EAAOK,OAAOrF,IAAd,GAAAuE,OAAuB5I,EAAKuJ,cAA5B,aAOfvJ,EAAKiJ,oBAAiBU,EA3CoD3J,6CAiD3E,WAAO,IAAAwF,EAAAhF,KACA6I,EAAS7I,KAAK6I,OACdvJ,EAASuJ,EAAOvJ,OAChB8J,EAAI9J,EAAO8J,EACXC,EAAUR,EAAOS,SAASzF,IAAK7D,KAAK8I,aACpCS,EAAeC,eAAuBX,EAAOK,OAAOrF,IAAK7D,KAAK+I,eAAgBtJ,QAC9EgK,EAAkBC,eAA0BpK,EAAQiK,GACpD1J,EAAsBgJ,EAAOK,OAAOrF,IAAd,GAAAuE,OAAuBpI,KAAK+I,cAA5B,oBAG5BF,EAAOc,GAAGC,iBAAiBlI,IAAK1B,KAAK+I,cAAe,SAAAzJ,GACnD,IAAMkJ,EAAeqB,eAAgBvK,GAiDrC,OAhDA0F,EAAKyD,eAAiBH,gBACrBE,eACA/I,OAAQgK,EAAgBK,IAAK,SAAAtC,GAAM,OAClChD,MAAOgD,EAAOhD,MACd4B,MAAOoB,EAAO5F,MACd0E,SACCD,UAAWmB,EAAOnB,cAGpB3G,QAASsF,EAAKtF,QACdC,kBAAmByJ,EAAG,gBACtBxJ,oBAA6C,IAAxBC,EAA4BuJ,EAAG,wBAAsBD,EAC1EtJ,yBAA6CsJ,IAAxBtJ,EAAoCmF,EAAKtF,QAAUG,IAGzEmF,EAAKyD,eAAenE,KAAM,iBAAkBuB,GAAIwD,EAAS,SAEzDb,EAAavD,WAAWvE,KACvB8D,MAAOQ,EAAKgE,cACZ5D,KAAMJ,EAAKI,KACXG,SAAS,IAGViD,EAAa7D,gBACZpD,YACCC,MAAO,0BAITgH,EAAalE,KAAM,aAAcuB,GAAIwD,GAErCb,EAAahD,GAAI,UAAW,SAAEe,EAAKwD,GAClClB,EAAOmB,QAAShF,EAAK8D,YAAaiB,GAClClB,EAAOoB,QAAQ5C,KAAK6C,UAGrB1B,EAAahD,GAAI,gBAAiB,SAAEe,EAAKC,EAAM2D,GAE9C3B,EAAaC,eAAe2B,cAEvBD,IACyB,IAAxBtK,GACJmF,EAAKyD,eAAe4B,qBAAsBxB,EAAOjH,MAAOoD,EAAK+D,eAE9D/D,EAAKyD,eAAe6B,0BAIf9B,WAzH2B+B","file":"js/chunk-0ddd0e7e.11060f8a.js","sourcesContent":["/**\n * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module font/ui/colortableview\n */\n\nimport { icons } from 'ckeditor5/src/core';\nimport { ButtonView, ColorGridView, ColorTileView, FocusCycler, LabelView, Template, View } from 'ckeditor5/src/ui';\nimport { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';\n\nimport DocumentColorCollection from '../documentcolorcollection';\n\nimport '../../theme/fontcolor.css';\n\n/**\n * A class which represents a view with the following sub–components:\n *\n * * A remove color button,\n * * A static {@link module:ui/colorgrid/colorgrid~ColorGridView} of colors defined in the configuration,\n * * A dynamic {@link module:ui/colorgrid/colorgrid~ColorGridView} of colors used in the document.\n *\n * @extends module:ui/view~View\n */\nexport default class ColorTableView extends View {\n\t/**\n\t * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.\n\t *\n\t * @param {module:utils/locale~Locale} [locale] The localization services instance.\n\t * @param {Object} config The configuration object.\n\t * @param {Array.} config.colors An array with definitions of colors to\n\t * be displayed in the table.\n\t * @param {Number} config.columns The number of columns in the color grid.\n\t * @param {String} config.removeButtonLabel The label of the button responsible for removing the color.\n\t * @param {String} config.documentColorsLabel The label for the section with the document colors.\n\t * @param {Number} config.documentColorsCount The number of colors in the document colors section inside the color dropdown.\n\t */\n\tconstructor( locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } ) {\n\t\tsuper( locale );\n\n\t\t/**\n\t\t * A collection of the children of the table.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:ui/viewcollection~ViewCollection}\n\t\t */\n\t\tthis.items = this.createCollection();\n\n\t\t/**\n\t\t * An array with objects representing colors to be displayed in the grid.\n\t\t *\n\t\t * @type {Array.}\n\t\t */\n\t\tthis.colorDefinitions = colors;\n\n\t\t/**\n\t\t * Tracks information about the DOM focus in the list.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:utils/focustracker~FocusTracker}\n\t\t */\n\t\tthis.focusTracker = new FocusTracker();\n\n\t\t/**\n\t\t * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:utils/keystrokehandler~KeystrokeHandler}\n\t\t */\n\t\tthis.keystrokes = new KeystrokeHandler();\n\n\t\t/**\n\t\t * Keeps the value of the command associated with the table for the current selection.\n\t\t *\n\t\t * @type {String}\n\t\t */\n\t\tthis.set( 'selectedColor' );\n\n\t\t/**\n\t\t * The label of the button responsible for removing color attributes.\n\t\t *\n\t\t * @type {String}\n\t\t */\n\t\tthis.removeButtonLabel = removeButtonLabel;\n\n\t\t/**\n\t\t * The number of columns in the color grid.\n\t\t *\n\t\t * @type {Number}\n\t\t */\n\t\tthis.columns = columns;\n\n\t\t/**\n\t\t * A collection of definitions that store the document colors.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:font/documentcolorcollection~DocumentColorCollection}\n\t\t */\n\t\tthis.documentColors = new DocumentColorCollection();\n\n\t\t/**\n\t\t * The maximum number of colors in the document colors section.\n\t\t * If it equals 0, the document colors section is not added.\n\t\t *\n\t\t * @readonly\n\t\t * @type {Number}\n\t\t */\n\t\tthis.documentColorsCount = documentColorsCount;\n\n\t\t/**\n\t\t * Preserves the reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create\n\t\t * the default (static) color set.\n\t\t *\n\t\t * The property is loaded once the the parent dropdown is opened the first time.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:ui/colorgrid/colorgrid~ColorGridView|undefined} #staticColorsGrid\n\t\t */\n\n\t\t/**\n\t\t * Preserves the reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create\n\t\t * the document colors. It remains undefined if the document colors feature is disabled.\n\t\t *\n\t\t * The property is loaded once the the parent dropdown is opened the first time.\n\t\t *\n\t\t * @readonly\n\t\t * @member {module:ui/colorgrid/colorgrid~ColorGridView|undefined} #documentColorsGrid\n\t\t */\n\n\t\t/**\n\t\t * Helps cycling over focusable {@link #items} in the list.\n\t\t *\n\t\t * @readonly\n\t\t * @protected\n\t\t * @member {module:ui/focuscycler~FocusCycler}\n\t\t */\n\t\tthis._focusCycler = new FocusCycler( {\n\t\t\tfocusables: this.items,\n\t\t\tfocusTracker: this.focusTracker,\n\t\t\tkeystrokeHandler: this.keystrokes,\n\t\t\tactions: {\n\t\t\t\t// Navigate list items backwards using the Arrow Up key.\n\t\t\t\tfocusPrevious: 'arrowup',\n\n\t\t\t\t// Navigate list items forwards using the Arrow Down key.\n\t\t\t\tfocusNext: 'arrowdown'\n\t\t\t}\n\t\t} );\n\n\t\t/**\n\t\t * Document color section's label.\n\t\t *\n\t\t * @private\n\t\t * @readonly\n\t\t * @type {String}\n\t\t */\n\t\tthis._documentColorsLabel = documentColorsLabel;\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-color-table'\n\t\t\t\t]\n\t\t\t},\n\t\t\tchildren: this.items\n\t\t} );\n\n\t\tthis.items.add( this._removeColorButton() );\n\t}\n\n\t/**\n\t * Scans through the editor model and searches for text node attributes with the given attribute name.\n\t * Found entries are set as document colors.\n\t *\n\t * All the previously stored document colors will be lost in the process.\n\t *\n\t * @param {module:engine/model/model~Model} model The model used as a source to obtain the document colors.\n\t * @param {String} attributeName Determines the name of the related model's attribute for a given dropdown.\n\t */\n\tupdateDocumentColors( model, attributeName ) {\n\t\tconst document = model.document;\n\t\tconst maxCount = this.documentColorsCount;\n\n\t\tthis.documentColors.clear();\n\n\t\tfor ( const rootName of document.getRootNames() ) {\n\t\t\tconst root = document.getRoot( rootName );\n\t\t\tconst range = model.createRangeIn( root );\n\n\t\t\tfor ( const node of range.getItems() ) {\n\t\t\t\tif ( node.is( '$textProxy' ) && node.hasAttribute( attributeName ) ) {\n\t\t\t\t\tthis._addColorToDocumentColors( node.getAttribute( attributeName ) );\n\n\t\t\t\t\tif ( this.documentColors.length >= maxCount ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Refreshes the state of the selected color in one or both {@link module:ui/colorgrid/colorgrid~ColorGridView}s\n\t * available in the {@link module:font/ui/colortableview~ColorTableView}. It guarantees that the selection will occur only in one\n\t * of them.\n\t */\n\tupdateSelectedColors() {\n\t\tconst documentColorsGrid = this.documentColorsGrid;\n\t\tconst staticColorsGrid = this.staticColorsGrid;\n\t\tconst selectedColor = this.selectedColor;\n\n\t\tstaticColorsGrid.selectedColor = selectedColor;\n\n\t\tif ( documentColorsGrid ) {\n\t\t\tdocumentColorsGrid.selectedColor = selectedColor;\n\t\t}\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\trender() {\n\t\tsuper.render();\n\n\t\t// Items added before rendering should be known to the #focusTracker.\n\t\tfor ( const item of this.items ) {\n\t\t\tthis.focusTracker.add( item.element );\n\t\t}\n\n\t\t// Start listening for the keystrokes coming from #element.\n\t\tthis.keystrokes.listenTo( this.element );\n\t}\n\n\t/**\n\t * Appends {@link #staticColorsGrid} and {@link #documentColorsGrid} views.\n\t */\n\tappendGrids() {\n\t\tif ( this.staticColorsGrid ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.staticColorsGrid = this._createStaticColorsGrid();\n\n\t\tthis.items.add( this.staticColorsGrid );\n\n\t\tif ( this.documentColorsCount ) {\n\t\t\t// Create a label for document colors.\n\t\t\tconst bind = Template.bind( this.documentColors, this.documentColors );\n\t\t\tconst label = new LabelView( this.locale );\n\t\t\tlabel.text = this._documentColorsLabel;\n\t\t\tlabel.extendTemplate( {\n\t\t\t\tattributes: {\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'ck',\n\t\t\t\t\t\t'ck-color-grid__label',\n\t\t\t\t\t\tbind.if( 'isEmpty', 'ck-hidden' )\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t} );\n\t\t\tthis.items.add( label );\n\t\t\tthis.documentColorsGrid = this._createDocumentColorsGrid();\n\t\t\tthis.items.add( this.documentColorsGrid );\n\t\t}\n\t}\n\n\t/**\n\t * Focuses the first focusable element in {@link #items}.\n\t */\n\tfocus() {\n\t\tthis._focusCycler.focusFirst();\n\t}\n\n\t/**\n\t * Focuses the last focusable element in {@link #items}.\n\t */\n\tfocusLast() {\n\t\tthis._focusCycler.focusLast();\n\t}\n\n\t/**\n\t * Adds the remove color button as a child of the current view.\n\t *\n\t * @private\n\t * @returns {module:ui/button/buttonview~ButtonView}\n\t */\n\t_removeColorButton() {\n\t\tconst buttonView = new ButtonView();\n\n\t\tbuttonView.set( {\n\t\t\twithText: true,\n\t\t\ticon: icons.eraser,\n\t\t\ttooltip: true,\n\t\t\tlabel: this.removeButtonLabel\n\t\t} );\n\n\t\tbuttonView.class = 'ck-color-table__remove-color';\n\t\tbuttonView.on( 'execute', () => {\n\t\t\tthis.fire( 'execute', { value: null } );\n\t\t} );\n\n\t\treturn buttonView;\n\t}\n\n\t/**\n\t * Creates a static color table grid based on the editor configuration.\n\t *\n\t * @private\n\t * @returns {module:ui/colorgrid/colorgrid~ColorGridView}\n\t */\n\t_createStaticColorsGrid() {\n\t\tconst colorGrid = new ColorGridView( this.locale, {\n\t\t\tcolorDefinitions: this.colorDefinitions,\n\t\t\tcolumns: this.columns\n\t\t} );\n\n\t\tcolorGrid.delegate( 'execute' ).to( this );\n\n\t\treturn colorGrid;\n\t}\n\n\t/**\n\t * Creates the document colors section view and binds it to {@link #documentColors}.\n\t *\n\t * @private\n\t * @returns {module:ui/colorgrid/colorgrid~ColorGridView}\n\t */\n\t_createDocumentColorsGrid() {\n\t\tconst bind = Template.bind( this.documentColors, this.documentColors );\n\t\tconst documentColorsGrid = new ColorGridView( this.locale, {\n\t\t\tcolumns: this.columns\n\t\t} );\n\n\t\tdocumentColorsGrid.delegate( 'execute' ).to( this );\n\n\t\tdocumentColorsGrid.extendTemplate( {\n\t\t\tattributes: {\n\t\t\t\tclass: bind.if( 'isEmpty', 'ck-hidden' )\n\t\t\t}\n\t\t} );\n\n\t\tdocumentColorsGrid.items.bindTo( this.documentColors ).using(\n\t\t\tcolorObj => {\n\t\t\t\tconst colorTile = new ColorTileView();\n\n\t\t\t\tcolorTile.set( {\n\t\t\t\t\tcolor: colorObj.color,\n\t\t\t\t\thasBorder: colorObj.options && colorObj.options.hasBorder\n\t\t\t\t} );\n\n\t\t\t\tif ( colorObj.label ) {\n\t\t\t\t\tcolorTile.set( {\n\t\t\t\t\t\tlabel: colorObj.label,\n\t\t\t\t\t\ttooltip: true\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tcolorTile.on( 'execute', () => {\n\t\t\t\t\tthis.fire( 'execute', {\n\t\t\t\t\t\tvalue: colorObj.color\n\t\t\t\t\t} );\n\t\t\t\t} );\n\n\t\t\t\treturn colorTile;\n\t\t\t}\n\t\t);\n\n\t\t// Selected color should be cleared when document colors became empty.\n\t\tthis.documentColors.on( 'change:isEmpty', ( evt, name, val ) => {\n\t\t\tif ( val ) {\n\t\t\t\tdocumentColorsGrid.selectedColor = null;\n\t\t\t}\n\t\t} );\n\n\t\treturn documentColorsGrid;\n\t}\n\n\t/**\n\t * Adds a given color to the document colors list. If possible, the method will attempt to use\n\t * data from the {@link #colorDefinitions} (label, color options).\n\t *\n\t * @private\n\t * @param {String} color A string that stores the value of the recently applied color.\n\t */\n\t_addColorToDocumentColors( color ) {\n\t\tconst predefinedColor = this.colorDefinitions\n\t\t\t.find( definition => definition.color === color );\n\n\t\tif ( !predefinedColor ) {\n\t\t\tthis.documentColors.add( {\n\t\t\t\tcolor,\n\t\t\t\tlabel: color,\n\t\t\t\toptions: {\n\t\t\t\t\thasBorder: false\n\t\t\t\t}\n\t\t\t} );\n\t\t} else {\n\t\t\tthis.documentColors.add( Object.assign( {}, predefinedColor ) );\n\t\t}\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module font/utils\n */\n\nimport ColorTableView from './ui/colortableview';\n\n/**\n * The name of the font size plugin.\n */\nexport const FONT_SIZE = 'fontSize';\n\n/**\n * The name of the font family plugin.\n */\nexport const FONT_FAMILY = 'fontFamily';\n\n/**\n * The name of the font color plugin.\n */\nexport const FONT_COLOR = 'fontColor';\n\n/**\n * The name of the font background color plugin.\n */\nexport const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';\n\n/**\n * Builds a proper {@link module:engine/conversion/conversion~ConverterDefinition converter definition} out of input data.\n *\n * @param {String} modelAttributeKey Key\n * @param {Array.|Array.} options\n * @returns {module:engine/conversion/conversion~ConverterDefinition}\n */\nexport function buildDefinition( modelAttributeKey, options ) {\n\tconst definition = {\n\t\tmodel: {\n\t\t\tkey: modelAttributeKey,\n\t\t\tvalues: []\n\t\t},\n\t\tview: {},\n\t\tupcastAlso: {}\n\t};\n\n\tfor ( const option of options ) {\n\t\tdefinition.model.values.push( option.model );\n\t\tdefinition.view[ option.model ] = option.view;\n\n\t\tif ( option.upcastAlso ) {\n\t\t\tdefinition.upcastAlso[ option.model ] = option.upcastAlso;\n\t\t}\n\t}\n\n\treturn definition;\n}\n\n/**\n * A {@link module:font/fontcolor~FontColor font color} and\n * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper\n * responsible for upcasting data to the model.\n *\n * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.\n *\n * @param {String} styleAttr\n * @return {String}\n */\nexport function renderUpcastAttribute( styleAttr ) {\n\treturn viewElement => normalizeColorCode( viewElement.getStyle( styleAttr ) );\n}\n\n/**\n * A {@link module:font/fontcolor~FontColor font color} and\n * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper\n * responsible for downcasting a color attribute to a `` element.\n *\n * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.\n *\n * @param {String} styleAttr\n */\nexport function renderDowncastElement( styleAttr ) {\n\treturn ( modelAttributeValue, { writer } ) => writer.createAttributeElement( 'span', {\n\t\tstyle: `${ styleAttr }:${ modelAttributeValue }`\n\t}, { priority: 7 } );\n}\n\n/**\n * A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values.\n *\n * @param {Object} config The configuration object.\n * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView The dropdown view to which\n * a {@link module:font/ui/colortableview~ColorTableView} will be added.\n * @param {Array.} config.colors An array with definitions\n * representing colors to be displayed in the color table.\n * @param {String} config.removeButtonLabel The label for the button responsible for removing the color.\n * @param {String} config.documentColorsLabel The label for the section with document colors.\n * @param {String} config.documentColorsCount The number of document colors inside the dropdown.\n * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.\n */\nexport function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } ) {\n\tconst locale = dropdownView.locale;\n\tconst colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } );\n\n\tdropdownView.colorTableView = colorTableView;\n\tdropdownView.panelView.children.add( colorTableView );\n\n\tcolorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );\n\n\treturn colorTableView;\n}\n\n// Fixes the color value string.\n//\n// @param {String} value\n// @returns {String}\nfunction normalizeColorCode( value ) {\n\treturn value.replace( /\\s/g, '' );\n}\n","/**\n * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module font/ui/colorui\n */\n\nimport { Plugin } from 'ckeditor5/src/core';\nimport { createDropdown, normalizeColorOptions, getLocalizedColorOptions } from 'ckeditor5/src/ui';\n\nimport { addColorTableToDropdown } from '../utils';\n\n/**\n * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.\n *\n * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting\n * a {@link module:font/ui/colortableview~ColorTableView}.\n *\n * @extends module:core/plugin~Plugin\n */\nexport default class ColorUI extends Plugin {\n\t/**\n\t * Creates a plugin which introduces a dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}.\n\t *\n\t * @param {module:core/editor/editor~Editor} editor\n\t * @param {Object} config The configuration object.\n\t * @param {String} config.commandName The name of the command which will be executed when a color tile is clicked.\n\t * @param {String} config.componentName The name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}\n\t * and the configuration scope name in `editor.config`.\n\t * @param {String} config.icon The SVG icon used by the dropdown.\n\t * @param {String} config.dropdownLabel The label used by the dropdown.\n\t */\n\tconstructor( editor, { commandName, icon, componentName, dropdownLabel } ) {\n\t\tsuper( editor );\n\n\t\t/**\n\t\t * The name of the command which will be executed when a color tile is clicked.\n\t\t *\n\t\t * @type {String}\n\t\t */\n\t\tthis.commandName = commandName;\n\n\t\t/**\n\t\t * The name of this component in the {@link module:ui/componentfactory~ComponentFactory}.\n\t\t * Also the configuration scope name in `editor.config`.\n\t\t *\n\t\t * @type {String}\n\t\t */\n\t\tthis.componentName = componentName;\n\n\t\t/**\n\t\t * The SVG icon used by the dropdown.\n\t\t * @type {String}\n\t\t */\n\t\tthis.icon = icon;\n\n\t\t/**\n\t\t * The label used by the dropdown.\n\t\t *\n\t\t * @type {String}\n\t\t */\n\t\tthis.dropdownLabel = dropdownLabel;\n\n\t\t/**\n\t\t * The number of columns in the color grid.\n\t\t *\n\t\t * @type {Number}\n\t\t */\n\t\tthis.columns = editor.config.get( `${ this.componentName }.columns` );\n\n\t\t/**\n\t\t * Keeps a reference to {@link module:font/ui/colortableview~ColorTableView}.\n\t\t *\n\t\t * @member {module:font/ui/colortableview~ColorTableView}\n\t\t */\n\t\tthis.colorTableView = undefined;\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tinit() {\n\t\tconst editor = this.editor;\n\t\tconst locale = editor.locale;\n\t\tconst t = locale.t;\n\t\tconst command = editor.commands.get( this.commandName );\n\t\tconst colorsConfig = normalizeColorOptions( editor.config.get( this.componentName ).colors );\n\t\tconst localizedColors = getLocalizedColorOptions( locale, colorsConfig );\n\t\tconst documentColorsCount = editor.config.get( `${ this.componentName }.documentColors` );\n\n\t\t// Register the UI component.\n\t\teditor.ui.componentFactory.add( this.componentName, locale => {\n\t\t\tconst dropdownView = createDropdown( locale );\n\t\t\tthis.colorTableView = addColorTableToDropdown( {\n\t\t\t\tdropdownView,\n\t\t\t\tcolors: localizedColors.map( option => ( {\n\t\t\t\t\tlabel: option.label,\n\t\t\t\t\tcolor: option.model,\n\t\t\t\t\toptions: {\n\t\t\t\t\t\thasBorder: option.hasBorder\n\t\t\t\t\t}\n\t\t\t\t} ) ),\n\t\t\t\tcolumns: this.columns,\n\t\t\t\tremoveButtonLabel: t( 'Remove color' ),\n\t\t\t\tdocumentColorsLabel: documentColorsCount !== 0 ? t( 'Document colors' ) : undefined,\n\t\t\t\tdocumentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount\n\t\t\t} );\n\n\t\t\tthis.colorTableView.bind( 'selectedColor' ).to( command, 'value' );\n\n\t\t\tdropdownView.buttonView.set( {\n\t\t\t\tlabel: this.dropdownLabel,\n\t\t\t\ticon: this.icon,\n\t\t\t\ttooltip: true\n\t\t\t} );\n\n\t\t\tdropdownView.extendTemplate( {\n\t\t\t\tattributes: {\n\t\t\t\t\tclass: 'ck-color-ui-dropdown'\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tdropdownView.bind( 'isEnabled' ).to( command );\n\n\t\t\tdropdownView.on( 'execute', ( evt, data ) => {\n\t\t\t\teditor.execute( this.commandName, data );\n\t\t\t\teditor.editing.view.focus();\n\t\t\t} );\n\n\t\t\tdropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {\n\t\t\t\t// Grids rendering is deferred (#6192).\n\t\t\t\tdropdownView.colorTableView.appendGrids();\n\n\t\t\t\tif ( isVisible ) {\n\t\t\t\t\tif ( documentColorsCount !== 0 ) {\n\t\t\t\t\t\tthis.colorTableView.updateDocumentColors( editor.model, this.componentName );\n\t\t\t\t\t}\n\t\t\t\t\tthis.colorTableView.updateSelectedColors();\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\treturn dropdownView;\n\t\t} );\n\t}\n}\n"],"sourceRoot":""}