@imposium-hub/components 1.56.0 → 1.57.0

package/dist/esm/components/font-picker/font-manager/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/components/font-picker/font-manager/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,UAAkB,EAAU,EAAE;IACpD,OAAO,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;AACzD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,GAAW,EAAmB,EAAE;IAChD,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAQ,EAAE;QACzC,MAAM,OAAO,GAAG,IAAI,cAAc,EAAE,CAAC;QACrC,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAC7C,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;QAC/B,OAAO,CAAC,kBAAkB,GAAG,GAAS,EAAE;YACpC,wBAAwB;YACxB,IAAI,OAAO,CAAC,UAAU,KAAK,CAAC,EAAE;gBAC1B,IAAI,OAAO,CAAC,MAAM,KAAK,GAAG,EAAE;oBACxB,WAAW;oBACX,MAAM,CAAC,IAAI,KAAK,CAAC,4BAA4B,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;iBACnE;qBAAM;oBACH,aAAa;oBACb,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;iBACjC;aACJ;QACL,CAAC,CAAC;QACF,OAAO,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,GAAW,EAAY,EAAE;IAC/D,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,IAAI,KAAK,CAAC;IACV,GAAG;QACC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACxB,IAAI,KAAK,EAAE;YACP,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B;KACJ,QAAQ,KAAK,EAAE;IAChB,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC"}

package/dist/esm/index.d.ts

@@ -94,4 +94,5 @@ import { getFirstStoryInOrg, string2HexCode, toFixed, padStart, parameterizeServ
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 import { getMediaPreviewStyle } from './utils/assets';
 import AdvancedNumberField from './components/advanced-number-field/AdvancedNumberField';
-export { AppWrapper, AuthGate, ImposiumHeader, ImposiumDropdown, Button, ButtonGroupField, ButtonMenu, ButtonMenuItem, Card, CheckboxField, ControlledList, DataTable, DataTablePaginator, FieldWrapper, HRule, ListField, Modal, AdvancedNumberField, NumberField, SelectField, ColorField, Tabs, ITab, Tag, TextField, TextAreaField, ToastService, SliderField, Section, DeterminateLoader, Spinner, NoAccess, ServiceIcon, LogViewer, StoryPreviewer, ShortcutMenu, Portal, AssetDetails, ImagePlayer, VideoPlayer, AudioPlayer, VideoPreview, ImagePreview, ImageSequencePlayer, AssetsTypeIcon, AssetsTableDateCell, AssetsTableDropzone, AssetsTablePreviewCell, AssetsTableSelectFilter, AssetsTableSelectCell, AssetsTableTypeFilter, AssetsTableTypeCell, AssetsTableStatusCell, AssetsTableNameFilter, AssetsTableNameCell, AssetsTableDurationCell, AssetsTableTagsCell, AssetsTableTagsFilter, AssetsTableTagsPivot, AssetsTableComplexTagCell, AssetField, AssetsUploadMenu, FontAssetPreview, DroppableAssetRenderer, PreviewNotAvailable, IStaticComposition, auth, login, clearCachedAuth, access, cacheAccessData, clearCachedAccessList, storyAdded, storyNameMutated, orgNameMutated, storyDeleted, updateFilters, getAssets, deleteAssets, addAssetTag, deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration, toggleAutoTag, uploadAssets, selectAsset, deselectAsset, resetSelection, assetFilters, assetList, assetUploads, selectedAssets, getAssetTagList, addAssetTagToList, assetTags, assetActions, activeBatch, batchActions, AuthService, IIdentity, SessionService, IHubSession, API, IImposiumAPI, LegacyAPI, StorageService, Timer, validateAccessLevel, getFirstStoryInOrg, string2HexCode, parameterizeServiceUrl, scrapeEmail, fitToContainer, formattedTime, filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, toFixed, padStart, formatDateDefault, ASSET_TYPES, publish, publishVersion, clearStoryPublishStatus, getStoryPublishStatus, PublishStatusIndicator, AnchorField, SMPTEField, getMediaPreviewStyle, HEADER_HEIGHT, decoupleAssets, updateAssetStory };
+import FontPicker from './components/font-picker/FontPicker';
+export { AppWrapper, AuthGate, ImposiumHeader, ImposiumDropdown, Button, ButtonGroupField, ButtonMenu, ButtonMenuItem, Card, CheckboxField, ControlledList, DataTable, DataTablePaginator, FieldWrapper, HRule, ListField, Modal, AdvancedNumberField, NumberField, SelectField, ColorField, Tabs, ITab, Tag, TextField, TextAreaField, ToastService, SliderField, Section, DeterminateLoader, Spinner, NoAccess, ServiceIcon, LogViewer, StoryPreviewer, ShortcutMenu, Portal, AssetDetails, ImagePlayer, VideoPlayer, AudioPlayer, VideoPreview, ImagePreview, ImageSequencePlayer, AssetsTypeIcon, AssetsTableDateCell, AssetsTableDropzone, AssetsTablePreviewCell, AssetsTableSelectFilter, AssetsTableSelectCell, AssetsTableTypeFilter, AssetsTableTypeCell, AssetsTableStatusCell, AssetsTableNameFilter, AssetsTableNameCell, AssetsTableDurationCell, AssetsTableTagsCell, AssetsTableTagsFilter, AssetsTableTagsPivot, AssetsTableComplexTagCell, AssetField, AssetsUploadMenu, FontAssetPreview, DroppableAssetRenderer, PreviewNotAvailable, IStaticComposition, auth, login, clearCachedAuth, access, cacheAccessData, clearCachedAccessList, storyAdded, storyNameMutated, orgNameMutated, storyDeleted, updateFilters, getAssets, deleteAssets, addAssetTag, deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration, toggleAutoTag, uploadAssets, selectAsset, deselectAsset, resetSelection, assetFilters, assetList, assetUploads, selectedAssets, getAssetTagList, addAssetTagToList, assetTags, assetActions, activeBatch, batchActions, AuthService, IIdentity, SessionService, IHubSession, API, IImposiumAPI, LegacyAPI, StorageService, Timer, validateAccessLevel, getFirstStoryInOrg, string2HexCode, parameterizeServiceUrl, scrapeEmail, fitToContainer, formattedTime, filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, toFixed, padStart, formatDateDefault, ASSET_TYPES, publish, publishVersion, clearStoryPublishStatus, getStoryPublishStatus, PublishStatusIndicator, AnchorField, SMPTEField, getMediaPreviewStyle, HEADER_HEIGHT, decoupleAssets, updateAssetStory, FontPicker };

package/dist/esm/index.js

@@ -105,5 +105,6 @@ import { getFirstStoryInOrg, string2HexCode, toFixed, padStart, parameterizeServ
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 import { getMediaPreviewStyle } from './utils/assets';
 import AdvancedNumberField from './components/advanced-number-field/AdvancedNumberField';
-export { AppWrapper, AuthGate, ImposiumHeader, ImposiumDropdown, Button, ButtonGroupField, ButtonMenu, ButtonMenuItem, Card, CheckboxField, ControlledList, DataTable, DataTablePaginator, FieldWrapper, HRule, ListField, Modal, AdvancedNumberField, NumberField, SelectField, ColorField, Tabs, Tag, TextField, TextAreaField, ToastService, SliderField, Section, DeterminateLoader, Spinner, NoAccess, ServiceIcon, LogViewer, StoryPreviewer, ShortcutMenu, Portal, AssetDetails, ImagePlayer, VideoPlayer, AudioPlayer, VideoPreview, ImagePreview, ImageSequencePlayer, AssetsTypeIcon, AssetsTableDateCell, AssetsTableDropzone, AssetsTablePreviewCell, AssetsTableSelectFilter, AssetsTableSelectCell, AssetsTableTypeFilter, AssetsTableTypeCell, AssetsTableStatusCell, AssetsTableNameFilter, AssetsTableNameCell, AssetsTableDurationCell, AssetsTableTagsCell, AssetsTableTagsFilter, AssetsTableTagsPivot, AssetsTableComplexTagCell, AssetField, AssetsUploadMenu, FontAssetPreview, DroppableAssetRenderer, PreviewNotAvailable, auth, login, clearCachedAuth, access, cacheAccessData, clearCachedAccessList, storyAdded, storyNameMutated, orgNameMutated, storyDeleted, updateFilters, getAssets, deleteAssets, addAssetTag, deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration, toggleAutoTag, uploadAssets, selectAsset, deselectAsset, resetSelection, assetFilters, assetList, assetUploads, selectedAssets, getAssetTagList, addAssetTagToList, assetTags, assetActions, activeBatch, batchActions, AuthService, SessionService, API, LegacyAPI, StorageService, Timer, validateAccessLevel, getFirstStoryInOrg, string2HexCode, parameterizeServiceUrl, scrapeEmail, fitToContainer, formattedTime, filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, toFixed, padStart, formatDateDefault, ASSET_TYPES, publish, publishVersion, clearStoryPublishStatus, getStoryPublishStatus, PublishStatusIndicator, AnchorField, SMPTEField, getMediaPreviewStyle, HEADER_HEIGHT, decoupleAssets, updateAssetStory };
+import FontPicker from './components/font-picker/FontPicker';
+export { AppWrapper, AuthGate, ImposiumHeader, ImposiumDropdown, Button, ButtonGroupField, ButtonMenu, ButtonMenuItem, Card, CheckboxField, ControlledList, DataTable, DataTablePaginator, FieldWrapper, HRule, ListField, Modal, AdvancedNumberField, NumberField, SelectField, ColorField, Tabs, Tag, TextField, TextAreaField, ToastService, SliderField, Section, DeterminateLoader, Spinner, NoAccess, ServiceIcon, LogViewer, StoryPreviewer, ShortcutMenu, Portal, AssetDetails, ImagePlayer, VideoPlayer, AudioPlayer, VideoPreview, ImagePreview, ImageSequencePlayer, AssetsTypeIcon, AssetsTableDateCell, AssetsTableDropzone, AssetsTablePreviewCell, AssetsTableSelectFilter, AssetsTableSelectCell, AssetsTableTypeFilter, AssetsTableTypeCell, AssetsTableStatusCell, AssetsTableNameFilter, AssetsTableNameCell, AssetsTableDurationCell, AssetsTableTagsCell, AssetsTableTagsFilter, AssetsTableTagsPivot, AssetsTableComplexTagCell, AssetField, AssetsUploadMenu, FontAssetPreview, DroppableAssetRenderer, PreviewNotAvailable, auth, login, clearCachedAuth, access, cacheAccessData, clearCachedAccessList, storyAdded, storyNameMutated, orgNameMutated, storyDeleted, updateFilters, getAssets, deleteAssets, addAssetTag, deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration, toggleAutoTag, uploadAssets, selectAsset, deselectAsset, resetSelection, assetFilters, assetList, assetUploads, selectedAssets, getAssetTagList, addAssetTagToList, assetTags, assetActions, activeBatch, batchActions, AuthService, SessionService, API, LegacyAPI, StorageService, Timer, validateAccessLevel, getFirstStoryInOrg, string2HexCode, parameterizeServiceUrl, scrapeEmail, fitToContainer, formattedTime, filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, toFixed, padStart, formatDateDefault, ASSET_TYPES, publish, publishVersion, clearStoryPublishStatus, getStoryPublishStatus, PublishStatusIndicator, AnchorField, SMPTEField, getMediaPreviewStyle, HEADER_HEIGHT, decoupleAssets, updateAssetStory, FontPicker };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,cAAc,MAAM,4BAA4B,CAAC;AACxD,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D,OAAO,cAAc,MAAM,yCAAyC,CAAC;AACrE,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,kBAAkB,MAAM,4CAA4C,CAAC;AAC5E,OAAO,KAAK,MAAM,0BAA0B,CAAC;AAC7C,OAAO,IAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,aAAa,MAAM,2CAA2C,CAAC;AACtE,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,gBAAgB,MAAM,kDAAkD,CAAC;AAChF,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAChE,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAChE,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,aAAa,MAAM,4CAA4C,CAAC;AACvE,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAChE,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D,OAAO,GAAG,MAAM,sBAAsB,CAAC;AACvC,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAC9C,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AACtF,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,sBAAsB,MAAM,4CAA4C,CAAC;AAChF,OAAO,uBAAuB,MAAM,6CAA6C,CAAC;AAClF,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAC9E,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAC9E,OAAO,uBAAuB,MAAM,6CAA6C,CAAC;AAClF,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAC9E,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,yBAAyB,MAAM,+CAA+C,CAAC;AACtF,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAC9E,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAC9E,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,sBAAsB,MAAM,4CAA4C,CAAC;AAChF,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,YAAY,MAAM,mCAAmC,CAAC;AAC7D,OAAO,YAAY,MAAM,mCAAmC,CAAC;AAC7D,OAAO,mBAAmB,MAAM,0CAA0C,CAAC;AAC3E,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAChE,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D;;GAEG;AACH,OAAO,IAAI,MAAM,uBAAuB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EACH,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACxB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACH,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,YAAY,EACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACH,SAAS,EACT,YAAY,EACZ,WAAW,EACX,cAAc,EACd,eAAe,EACf,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EACnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC7F,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAC1D,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAC1D,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,YAAY,MAAM,8BAA8B,CAAC;AACxD;;GAEG;AACH,OAAO,WAA0B,MAAM,kBAAkB,CAAC;AAC1D,OAAO,cAA+B,MAAM,oBAAoB,CAAC;AACjE,OAAO,GAAqB,MAAM,gBAAgB,CAAC;AACnD,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,kBAAkB,CAAC;AAErC;;GAEG;AACH,OAAO,EACH,kBAAkB,EAClB,cAAc,EACd,OAAO,EACP,QAAQ,EACR,sBAAsB,EACtB,WAAW,EACX,cAAc,EACd,aAAa,EACb,yBAAyB,EACzB,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EAChB,MAAM,QAAQ,CAAC;AAChB,OAAO,sBAAsB,MAAM,4DAA4D,CAAC;AAChG,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,mBAAmB,MAAM,wDAAwD,CAAC;AACzF,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAE7D,OAAO,EACH,UAAU,EACV,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,IAAI,EACJ,aAAa,EACb,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,KAAK,EACL,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,WAAW,EACX,UAAU,EACV,IAAI,EAEJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,YAAY,EACZ,WAAW,EACX,OAAO,EACP,iBAAiB,EACjB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAS,EACT,cAAc,EACd,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,uBAAuB,EACvB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,mBAAmB,EAEnB,IAAI,EACJ,KAAK,EACL,eAAe,EACf,MAAM,EACN,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,SAAS,EACT,YAAY,EACZ,WAAW,EACX,cAAc,EACd,eAAe,EACf,eAAe,EACf,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EACd,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EAEX,cAAc,EAEd,GAAG,EAEH,SAAS,EACT,cAAc,EACd,KAAK,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,cAAc,EACd,aAAa,EACb,aAAa,EACb,yBAAyB,EACzB,qBAAqB,EACrB,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,WAAW,EACX,OAAO,EACP,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,UAAU,EACb,CAAC"}

package/dist/styles.css

@@ -2750,3 +2750,110 @@ h3 {
 .advanced-number-field .form-field-content .font-size-list .font-size-item .font-size-btn:hover {
   background-color: #494949;
 }
+#font-picker {
+  position: relative;
+  display: inline-block;
+  width: 200px;
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0 2px;
+  box-shadow: none;
+}
+#font-picker * {
+  box-sizing: border-box;
+}
+#font-picker p {
+  margin: 0;
+  padding: 0;
+}
+#font-picker button {
+  color: inherit;
+  font-size: 12px;
+  background: none;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+}
+#font-picker .dropdown-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 20px;
+  padding: 0 4px;
+  background: #1d1d1d;
+}
+#font-picker .dropdown-button:hover,
+#font-picker .dropdown-button:focus {
+  background: #151515;
+}
+#font-picker .dropdown-button .dropdown-font-name {
+  overflow: hidden;
+  white-space: nowrap;
+}
+#font-picker .dropdown-icon {
+  margin-left: 10px;
+}
+#font-picker .dropdown-icon.loading::before {
+  display: block;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #b2b2b2;
+  border-top-color: #000;
+  border-radius: 50%;
+  animation: spinner 0.6s linear infinite;
+  content: "";
+}
+#font-picker .dropdown-icon.finished::before {
+  display: block;
+  width: 0;
+  height: 0;
+  margin: 0 2px;
+  border-top: 6px solid #000;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  transition: transform 0.3s;
+  content: "";
+}
+#font-picker .dropdown-icon.error::before {
+  content: "⚠";
+}
+#font-picker ul {
+  position: absolute;
+  z-index: 1;
+  width: 280px;
+  max-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #1d1d1d;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+  -webkit-overflow-scrolling: touch;
+}
+#font-picker ul li {
+  height: 20px;
+  list-style: none;
+}
+#font-picker ul li button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding-left: 3px;
+  white-space: nowrap;
+}
+#font-picker ul li button:hover,
+#font-picker ul li button:focus,
+#font-picker ul li button.active-font {
+  background: #2d8ceb;
+}
+#font-picker.expanded .dropdown-icon.finished::before {
+  transform: rotate(-180deg);
+}
+#font-picker.expanded ul {
+  max-height: 200px;
+}

package/dist/styles.less

@@ -2815,3 +2815,135 @@ h3{
         // }
     }
 }
+
+#font-picker {
+	position: relative;
+	display: inline-block;
+	width: 200px;
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0 2px;
+    box-shadow: none;
+
+	* {
+		box-sizing: border-box;
+	}
+
+	p {
+		margin: 0;
+		padding: 0;
+	}
+
+	button {
+		color: inherit;
+		font-size: 12px;
+		background: none;
+		border: 0;
+		outline: none;
+		cursor: pointer;
+	}
+
+	.dropdown-button {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: 20px;
+		padding: 0 4px;
+		background: #1d1d1d;
+        
+		&:hover, &:focus {
+			background: #151515;
+		}
+
+		.dropdown-font-name {
+			overflow: hidden;
+			white-space: nowrap;
+		}
+	}
+
+	.dropdown-icon {
+		margin-left: 10px;
+	}
+
+	.dropdown-icon.loading {
+		&::before {
+			display: block;
+			width: 10px;
+			height: 10px;
+			border: 2px solid #b2b2b2;
+			border-top-color: #000;
+			border-radius: 50%;
+			animation: spinner 0.6s linear infinite;
+			content: "";
+		}
+	}
+
+	.dropdown-icon.finished {
+		&::before {
+			display: block;
+			width: 0;
+			height: 0;
+			margin: 0 2px;
+			border-top: 6px solid #000;
+			border-right: 5px solid transparent;
+			border-left: 5px solid transparent;
+			transition: transform 0.3s;
+			content: "";
+		}
+	}
+
+	.dropdown-icon.error {
+		&::before {
+			content: "⚠";
+		}
+	}
+
+	ul {
+		position: absolute;
+		z-index: 1;
+		width: 280px;
+		max-height: 0;
+		margin: 0;
+		padding: 0;
+		overflow-x: hidden;
+		overflow-y: auto;
+		background: #1d1d1d;
+		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+		-webkit-overflow-scrolling: touch;
+
+		li {
+			height: 20px;
+			list-style: none;
+
+			button {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				height: 100%;
+				padding-left: 3px;
+				white-space: nowrap;
+                
+				&:hover, &:focus, &.active-font {
+					background: #2d8ceb;
+				}
+			}
+		}
+	}
+}
+
+#font-picker.expanded {
+	.dropdown-icon.finished {
+		&::before {
+			transform: rotate(-180deg);
+		}
+	}
+
+	ul {
+		max-height: 200px;
+	}
+}
+

package/less/components/font-picker.less

@@ -0,0 +1,131 @@
+
+#font-picker {
+	position: relative;
+	display: inline-block;
+	width: 200px;
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0 2px;
+    box-shadow: none;
+
+	* {
+		box-sizing: border-box;
+	}
+
+	p {
+		margin: 0;
+		padding: 0;
+	}
+
+	button {
+		color: inherit;
+		font-size: 12px;
+		background: none;
+		border: 0;
+		outline: none;
+		cursor: pointer;
+	}
+
+	.dropdown-button {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: 20px;
+		padding: 0 4px;
+		background: #1d1d1d;
+        
+		&:hover, &:focus {
+			background: #151515;
+		}
+
+		.dropdown-font-name {
+			overflow: hidden;
+			white-space: nowrap;
+		}
+	}
+
+	.dropdown-icon {
+		margin-left: 10px;
+	}
+
+	.dropdown-icon.loading {
+		&::before {
+			display: block;
+			width: 10px;
+			height: 10px;
+			border: 2px solid #b2b2b2;
+			border-top-color: #000;
+			border-radius: 50%;
+			animation: spinner 0.6s linear infinite;
+			content: "";
+		}
+	}
+
+	.dropdown-icon.finished {
+		&::before {
+			display: block;
+			width: 0;
+			height: 0;
+			margin: 0 2px;
+			border-top: 6px solid #000;
+			border-right: 5px solid transparent;
+			border-left: 5px solid transparent;
+			transition: transform 0.3s;
+			content: "";
+		}
+	}
+
+	.dropdown-icon.error {
+		&::before {
+			content: "⚠";
+		}
+	}
+
+	ul {
+		position: absolute;
+		z-index: 1;
+		width: 280px;
+		max-height: 0;
+		margin: 0;
+		padding: 0;
+		overflow-x: hidden;
+		overflow-y: auto;
+		background: #1d1d1d;
+		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+		-webkit-overflow-scrolling: touch;
+
+		li {
+			height: 20px;
+			list-style: none;
+
+			button {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				height: 100%;
+				padding-left: 3px;
+				white-space: nowrap;
+                
+				&:hover, &:focus, &.active-font {
+					background: #2d8ceb;
+				}
+			}
+		}
+	}
+}
+
+#font-picker.expanded {
+	.dropdown-icon.finished {
+		&::before {
+			transform: rotate(-180deg);
+		}
+	}
+
+	ul {
+		max-height: 200px;
+	}
+}

package/less/entry.less

@@ -35,4 +35,5 @@
 @import (inline) "components/tooltip.less";
 @import (inline) "components/variable-default-upload.less";
 @import (inline) "components/anchor-field.less";
-@import (inline) "components/advanced-number-field.less";
+@import (inline) "components/advanced-number-field.less";
+@import (inline) "components/font-picker.less";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.56.0",
+    "version": "1.57.0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/font-picker/FontPicker.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import FontManager from './font-manager/FontManager';
+import {
+    Category,
+    Font,
+    Options,
+    Script,
+    Variant,
+    FontList,
+    OPTIONS_DEFAULTS
+} from './font-manager/types';
+import { FONT_FAMILY_DEFAULT } from './font-manager/constants';
+import { createFontStyleSheets } from './font-manager/fontStyle';
+
+interface IFontPickerProps {
+    apiKey: string;
+    activeFontFamily: string;
+    onChange: (font: string) => void;
+    families: string[];
+    categories: Category[];
+    scripts: Script[];
+    variants: Variant[];
+    filter: (font: Font) => boolean;
+    limit: number;
+    defaultFonts: any;
+    customFonts?: any;
+}
+
+interface IFontPickerState {
+    expanded: boolean;
+    fonts: any;
+}
+
+export default class FontPicker extends React.PureComponent<IFontPickerProps, IFontPickerState> {
+    fontManager: FontManager;
+
+    static defaultProps = {
+        activeFontFamily: FONT_FAMILY_DEFAULT,
+        families: OPTIONS_DEFAULTS.families,
+        categories: OPTIONS_DEFAULTS.categories,
+        scripts: OPTIONS_DEFAULTS.scripts,
+        variants: OPTIONS_DEFAULTS.variants,
+        filter: OPTIONS_DEFAULTS.filter,
+        limit: OPTIONS_DEFAULTS.limit
+    };
+
+    private clickOutsideHandler: any;
+
+    constructor(props: any) {
+        super(props);
+
+        const {
+            apiKey,
+            activeFontFamily,
+            families,
+            categories,
+            scripts,
+            variants,
+            filter,
+            limit,
+            onChange
+        } = this.props;
+
+        this.state = {
+            expanded: false,
+            fonts: null
+        };
+
+        const options: Options = {
+            families,
+            categories,
+            scripts,
+            variants,
+            filter,
+            limit
+        };
+
+        this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange);
+    }
+
+    public compoenntDidMount(): void {
+        this.clickOutsideHandler = (e) => this.onClose(e);
+    }
+
+    public componentWillUnmount(): void {
+        this.clickOutsideHandler = (e) => {
+            return;
+        };
+    }
+
+    public componentDidUpdate = (prevProps: any) => {
+        const { activeFontFamily, onChange, customFonts, defaultFonts } = this.props;
+        if (prevProps.customFonts !== customFonts) {
+            this.fontManager
+                .init()
+                .then((fontMap: FontList): void => {
+                    const googleFonts = Array.from(fontMap.values()).filter((f) => f.files);
+                    const updateDefaultFonts = defaultFonts.map(
+                        (f: any) => googleFonts.find((o: any) => o.family === f.family) || f
+                    );
+                    const uniqueFontFamilies = new Set();
+                    const uniqueFonts = updateDefaultFonts.filter((e: any) => {
+                        const isDup = uniqueFontFamilies.has(e.family);
+                        uniqueFontFamilies.add(e.family);
+                        if (!isDup) {
+                            return true;
+                        }
+                        return false;
+                    });
+                    this.setState({ fonts: uniqueFonts }, () =>
+                        createFontStyleSheets(defaultFonts, uniqueFonts, customFonts)
+                    );
+                })
+                .catch((err: Error): void => {
+                    console.error('Error trying to fetch the list of available fonts');
+                    console.error(err);
+                });
+        }
+
+        if (activeFontFamily !== prevProps.activeFontFamily) {
+            this.setActiveFontFamily(activeFontFamily);
+        }
+
+        if (onChange !== prevProps.onChange) {
+            this.fontManager.setOnChange(onChange);
+        }
+    };
+
+    private onClose = (e) => {
+        let targetEl = e.target;
+        const fontPickerEl = document.getElementById(`font-picker`);
+
+        while (true) {
+            if (targetEl === fontPickerEl) {
+                return;
+            }
+            if (targetEl.parentNode) {
+                targetEl = targetEl.parentNode;
+            } else {
+                this.toggleExpanded();
+                return;
+            }
+        }
+    };
+
+    private onSelection = (e): void => {
+        const activeFontFamily = e.target.textContent;
+        if (!activeFontFamily) {
+            throw Error(`Missing font family in clicked font button`);
+        }
+        this.setActiveFontFamily(activeFontFamily);
+        this.toggleExpanded();
+    };
+
+    private setActiveFontFamily = (activeFontFamily: string): void => {
+        this.fontManager.setActiveFont(activeFontFamily);
+    };
+
+    private generateFontList = () => {
+        const { activeFontFamily, families } = this.props;
+
+        return (
+            <ul className='font-list'>
+                {families.map((font) => {
+                    const isActive = font === activeFontFamily;
+                    return (
+                        <li
+                            key={font}
+                            className='font-list-item'>
+                            <button
+                                type='button'
+                                id={`font-button-${font}`}
+                                className={`font-button ${isActive ? 'active-font' : ''}`}
+                                onClick={this.onSelection}
+                                onKeyDown={this.onSelection}
+                                style={{ fontFamily: font }}>
+                                {font}
+                            </button>
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    };
+
+    private toggleExpanded = (): void => {
+        const { expanded } = this.state;
+
+        if (expanded) {
+            this.setState({
+                expanded: false
+            });
+            document.removeEventListener('click', this.clickOutsideHandler);
+        } else {
+            this.setState({
+                expanded: true
+            });
+            document.addEventListener('click', this.clickOutsideHandler);
+        }
+    };
+
+    public render = () => {
+        const { activeFontFamily } = this.props;
+        const { expanded } = this.state;
+
+        return (
+            <div
+                id={`font-picker`}
+                className={expanded ? 'expanded' : ''}>
+                <button
+                    type='button'
+                    className='dropdown-button'
+                    onClick={this.toggleExpanded}
+                    onKeyDown={this.toggleExpanded}>
+                    <p className='dropdown-font-family'>{activeFontFamily}</p>
+                    <p className='dropdown-icon finished' />
+                </button>
+                {this.generateFontList()}
+            </div>
+        );
+    };
+}