${this.renderSearchbar()}
@@ -244,7 +248,7 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement {
Save
-
+
`;
}
@@ -297,6 +301,8 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement {
}
}
+export default UmbModalLayoutIconPickerElement;
+
declare global {
interface HTMLElementTagNameMap {
'umb-modal-layout-icon-picker': UmbModalLayoutIconPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts
new file mode 100644
index 0000000000..ecf8656afa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts
@@ -0,0 +1,25 @@
+import '../../../../../backoffice/editors/shared/editor-layout/editor-layout.element';
+import './modal-layout-icon-picker.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+
+import type { UmbModalLayoutIconPickerElement, UmbModalIconPickerData } from './modal-layout-icon-picker.element';
+
+export default {
+ title: 'API/Modals/Layouts/Icon Picker',
+ component: 'umb-modal-layout-icon-picker',
+ id: 'modal-layout-icon-picker',
+} as Meta;
+
+const data: UmbModalIconPickerData = {
+ multiple: true,
+ selection: [],
+};
+
+export const Overview: Story = () => html`
+
+
+`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
index b4d8a47160..dc8744ddc5 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
@@ -11,6 +11,7 @@ import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm
import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element';
import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
import { UmbModalHandler } from './';
+import { UmbModalIconPickerData } from './layouts/icon-picker/modal-layout-icon-picker.element';
export type UmbModelType = 'dialog' | 'sidebar';
@@ -57,6 +58,17 @@ export class UmbModalService {
return this.open('umb-modal-layout-property-editor-ui-picker', { data, type: 'sidebar', size: 'small' });
}
+ /**
+ * Opens an Icon Picker sidebar modal
+ * @public
+ * @param {UmbModalIconPickerData} [data]
+ * @return {*} {UmbModalHandler}
+ * @memberof UmbModalService
+ */
+ public iconPicker(data?: UmbModalIconPickerData): UmbModalHandler {
+ return this.open('umb-modal-layout-icon-picker', { data, type: 'sidebar', size: 'small' });
+ }
+
/**
* Opens a modal or sidebar modal
* @public
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
index 2c509cb4a2..a675f9494f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
@@ -1,12 +1,3 @@
-import '../../../backoffice/components/backoffice-modal-container.element';
-import '../../../backoffice/editors/shared/editor-layout/editor-layout.element';
-import '../../../core/services/modal/layouts/content-picker/modal-layout-content-picker.element';
-import '../../context/context-provider.element';
-import '@umbraco-ui/uui-modal';
-import '@umbraco-ui/uui-modal-container';
-import '@umbraco-ui/uui-modal-dialog';
-import '@umbraco-ui/uui-modal-sidebar';
-
import { Meta, Story } from '@storybook/web-components';
import { LitElement } from 'lit';
import { html } from 'lit-html';
@@ -17,19 +8,12 @@ import { UmbModalService } from './';
export default {
title: 'API/Modals',
- component: 'umb-installer',
- decorators: [
- (story) =>
- html`
- ${story()}
- `,
- ],
- id: 'installer-page',
+ id: 'umb-modal-service',
argTypes: {
- modalLayout: { control: 'select', options: ['Confirm', 'Content Picker', 'Property Editor UI Picker'] },
+ modalLayout: {
+ control: 'select',
+ options: ['Confirm', 'Content Picker', 'Property Editor UI Picker', 'Icon Picker'],
+ },
},
} as Meta;
@@ -58,6 +42,9 @@ export class StoryModalServiceExampleElement extends UmbContextConsumerMixin(Lit
case 'Property Editor UI Picker':
this._modalService?.propertyEditorUIPicker();
break;
+ case 'Icon Picker':
+ this._modalService?.iconPicker();
+ break;
default:
this._modalService?.confirm({
headline: 'Headline',
@@ -77,10 +64,7 @@ export class StoryModalServiceExampleElement extends UmbContextConsumerMixin(Lit
}
const Template: Story = (props) => {
- return html`
-
-
- `;
+ return html` `;
};
export const Overview = Template.bind({});
diff --git a/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts
deleted file mode 100644
index da55d4b809..0000000000
--- a/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import '../backoffice/components/backoffice-modal-container.element';
-import '../core/services/modal/layouts/content-picker/modal-layout-content-picker.element';
-import '../core/context/context-provider.element';
-import '../backoffice/editors/shared/editor-layout/editor-layout.element';
-
-import '../backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element';
-import '../core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element';
-
-import '@umbraco-ui/uui-modal';
-import '@umbraco-ui/uui-modal-container';
-import '@umbraco-ui/uui-modal-sidebar';
-import '@umbraco-ui/uui-modal-dialog';
-
-import { Meta } from '@storybook/web-components';
-import { html } from 'lit-html';
-import { UmbModalService } from '../core/services/modal';
-
-export default {
- title: 'Editors/Icon Picker',
- component: 'umb-property-editor-icon-picker',
- id: 'icon-picker',
- decorators: [
- (story) =>
- html`
-
-
- ${story()}
-
-
- `,
- ],
-} as Meta;
-
-export const IconPickerEditor = () => html`
- `;
-
-export const IconPickerModalLayout = () => html``;