trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: last-minute pre-commit cleanup.

This commit is contained in:
Ken Sternberg 2024-01-02 16:01:07 -08:00
parent 73bba0498f
commit cdeff2c86f
14 changed files with 83 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/admin/outposts/OutpostForm.ts
View File

@ -110,7 +110,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
async load(): Promise<void> { async load(): Promise<void> {
this.defaultConfig = await new OutpostsApi( this.defaultConfig = await new OutpostsApi(
DEFAULT_CONFIG DEFAULT_CONFIG,
).outpostsInstancesDefaultSettingsRetrieve(); ).outpostsInstancesDefaultSettingsRetrieve();
this.providers = providerProvider(this.type); this.providers = providerProvider(this.type);
} }
@ -188,7 +188,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
args.search = query; args.search = query;
} }
const items = await new OutpostsApi( const items = await new OutpostsApi(
DEFAULT_CONFIG DEFAULT_CONFIG,
).outpostsServiceConnectionsAllList(args); ).outpostsServiceConnectionsAllList(args);
return items.results; return items.results;
}} }}
@ -213,7 +213,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
</ak-search-select> </ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
"Selecting an integration enables the management of the outpost by authentik." "Selecting an integration enables the management of the outpost by authentik.",
)} )}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -239,7 +239,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
<ak-codemirror <ak-codemirror
mode=${CodeMirrorMode.YAML} mode=${CodeMirrorMode.YAML}
value="${YAML.stringify( value="${YAML.stringify(
this.instance ? this.instance.config : this.defaultConfig?.config this.instance ? this.instance.config : this.defaultConfig?.config,
)}" )}"
></ak-codemirror> ></ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

2
web/src/elements/ak-dual-select/ak-dual-select-provider.ts
View File

@ -26,7 +26,7 @@ import type { DataProvider, DualSelectPair } from "./types";
@customElement("ak-dual-select-provider") @customElement("ak-dual-select-provider")
export class AkDualSelectProvider extends CustomListenerElement(AKElement) { export class AkDualSelectProvider extends CustomListenerElement(AKElement) {
// A function that takes a page and returns the DualSelectPair[] collection with which to update // A function that takes a page and returns the DualSelectPair[] collection with which to update
// the "Available" pane. // the "Available" pane.
@property({ type: Object }) @property({ type: Object })
provider!: DataProvider; provider!: DataProvider;

11
web/src/elements/ak-dual-select/ak-dual-select.ts
View File

@ -5,7 +5,7 @@ import {
} from "@goauthentik/elements/utils/eventEmitter"; } from "@goauthentik/elements/utils/eventEmitter";
import { msg, str } from "@lit/localize"; import { msg, str } from "@lit/localize";
import { PropertyValues, TemplateResult, css, html, nothing } from "lit"; import { PropertyValues, TemplateResult, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import { createRef, ref } from "lit/directives/ref.js"; import { createRef, ref } from "lit/directives/ref.js";
import type { Ref } from "lit/directives/ref.js"; import type { Ref } from "lit/directives/ref.js";
@ -36,12 +36,7 @@ type PairValue = string | TemplateResult;
type Pair = [string, PairValue]; type Pair = [string, PairValue];
const alphaSort = ([_k1, v1]: Pair, [_k2, v2]: Pair) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0); const alphaSort = ([_k1, v1]: Pair, [_k2, v2]: Pair) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0);
const styles = [ const styles = [PFBase, PFButton, globalVariables, mainStyles];
PFBase,
PFButton,
globalVariables,
mainStyles,
];
/** /**
* @element ak-dual-select * @element ak-dual-select
@ -153,7 +148,7 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
default: default:
throw new Error( throw new Error(
`AkDualSelect.handleMove received unknown event type: ${eventName}` `AkDualSelect.handleMove received unknown event type: ${eventName}`,
); );
} }
this.dispatchCustomEvent("ak-dual-select-change", { value: this.value }); this.dispatchCustomEvent("ak-dual-select-change", { value: this.value });

16
web/src/elements/ak-dual-select/components/ak-dual-select-available-pane.ts
View File

@ -1,26 +1,20 @@
import { AKElement } from "@goauthentik/elements/Base"; import { AKElement } from "@goauthentik/elements/Base";
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter"; import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
import { PropertyValues, css, html, nothing } from "lit"; import { html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js"; import { customElement, property, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js"; import { classMap } from "lit/directives/class-map.js";
import { map } from "lit/directives/map.js"; import { map } from "lit/directives/map.js";
import { availablePaneStyles, listStyles } from "./styles.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css"; import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { EVENT_ADD_ONE } from "../constants"; import { EVENT_ADD_ONE } from "../constants";
import type { DualSelectPair } from "../types"; import type { DualSelectPair } from "../types";
import { availablePaneStyles, listStyles } from "./styles.css";
const styles = [ const styles = [PFBase, PFButton, PFDualListSelector, listStyles, availablePaneStyles];
PFBase,
PFButton,
PFDualListSelector,
listStyles,
availablePaneStyles
];
const hostAttributes = [ const hostAttributes = [
["aria-labelledby", "dual-list-selector-available-pane-status"], ["aria-labelledby", "dual-list-selector-available-pane-status"],
@ -39,7 +33,7 @@ const hostAttributes = [
* @fires ak-dual-select-available-move-changed - When the list of "to move" entries changed. * @fires ak-dual-select-available-move-changed - When the list of "to move" entries changed.
* Includes the current * `toMove` content. * Includes the current * `toMove` content.
* *
* @fires ak-dual-select-add-one - Doubleclick with the element clicked on. * @fires ak-dual-select-add-one - Double-click with the element clicked on.
* *
* It is not expected that the `ak-dual-select-available-move-changed` event will be used; instead, * It is not expected that the `ak-dual-select-available-move-changed` event will be used; instead,
* the attribute will be read by the parent when a control is clicked. * the attribute will be read by the parent when a control is clicked.
@ -105,7 +99,7 @@ export class AkDualSelectAvailablePane extends CustomEmitterElement(AKElement) {
} }
this.dispatchCustomEvent( this.dispatchCustomEvent(
"ak-dual-select-available-move-changed", "ak-dual-select-available-move-changed",
Array.from(this.toMove.values()).sort() Array.from(this.toMove.values()).sort(),
); );
this.dispatchCustomEvent("ak-dual-select-move"); this.dispatchCustomEvent("ak-dual-select-move");
// Necessary because updating a map won't trigger a state change // Necessary because updating a map won't trigger a state change

12
web/src/elements/ak-dual-select/components/ak-dual-select-controls.ts
View File

@ -64,7 +64,7 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
removeActive = false; removeActive = false;
/* Set to true if *all* the currently visible elements can be moved /* Set to true if *all* the currently visible elements can be moved
* into the selected list (essentially, if any visible elemnets are * into the selected list (essentially, if any visible elements are
* not currently selected * not currently selected
*/ */
@property({ attribute: "add-all-active", type: Boolean }) @property({ attribute: "add-all-active", type: Boolean })
@ -125,7 +125,7 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
msg("Add"), msg("Add"),
EVENT_ADD_SELECTED, EVENT_ADD_SELECTED,
this.addActive, this.addActive,
"fa-angle-right" "fa-angle-right",
)} )}
${this.selectAll ${this.selectAll
? html` ? html`
@ -133,13 +133,13 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
msg("Add All Available"), msg("Add All Available"),
EVENT_ADD_ALL, EVENT_ADD_ALL,
this.addAllActive, this.addAllActive,
"fa-angle-double-right" "fa-angle-double-right",
)} )}
${this.renderButton( ${this.renderButton(
msg("Remove All Available"), msg("Remove All Available"),
EVENT_REMOVE_ALL, EVENT_REMOVE_ALL,
this.removeAllActive, this.removeAllActive,
"fa-angle-double-left" "fa-angle-double-left",
)} )}
` `
: nothing} : nothing}
@ -147,14 +147,14 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
msg("Remove"), msg("Remove"),
EVENT_REMOVE_SELECTED, EVENT_REMOVE_SELECTED,
this.removeActive, this.removeActive,
"fa-angle-left" "fa-angle-left",
)} )}
${this.deleteAll ${this.deleteAll
? html`${this.renderButton( ? html`${this.renderButton(
msg("Remove All"), msg("Remove All"),
EVENT_DELETE_ALL, EVENT_DELETE_ALL,
this.enableDeleteAll, this.enableDeleteAll,
"fa-times" "fa-times",
)}` )}`
: nothing} : nothing}
</div> </div>

8
web/src/elements/ak-dual-select/components/ak-dual-select-selected-pane.ts
View File

@ -1,18 +1,18 @@
import { AKElement } from "@goauthentik/elements/Base"; import { AKElement } from "@goauthentik/elements/Base";
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter"; import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
import { css, html } from "lit"; import { html } from "lit";
import { customElement, property, state } from "lit/decorators.js"; import { customElement, property, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js"; import { classMap } from "lit/directives/class-map.js";
import { map } from "lit/directives/map.js"; import { map } from "lit/directives/map.js";
import { listStyles, selectedPaneStyles } from "./styles.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css"; import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { EVENT_REMOVE_ONE } from "../constants"; import { EVENT_REMOVE_ONE } from "../constants";
import type { DualSelectPair } from "../types"; import type { DualSelectPair } from "../types";
import { listStyles, selectedPaneStyles } from "./styles.css";
const styles = [PFBase, PFButton, PFDualListSelector, listStyles, selectedPaneStyles]; const styles = [PFBase, PFButton, PFDualListSelector, listStyles, selectedPaneStyles];
@ -31,7 +31,7 @@ const hostAttributes = [
* @fires ak-dual-select-selected-move-changed - When the list of "to move" entries changed. * @fires ak-dual-select-selected-move-changed - When the list of "to move" entries changed.
* Includes the current * `toMove` content. * Includes the current * `toMove` content.
* *
* @fires ak-dual-select-remove-one - Doubleclick with the element clicked on. * @fires ak-dual-select-remove-one - Double-click with the element clicked on.
* *
* It is not expected that the `ak-dual-select-selected-move-changed` will be used; instead, the * It is not expected that the `ak-dual-select-selected-move-changed` will be used; instead, the
* attribute will be read by the parent when a control is clicked. * attribute will be read by the parent when a control is clicked.
@ -79,7 +79,7 @@ export class AkDualSelectSelectedPane extends CustomEmitterElement(AKElement) {
} }
this.dispatchCustomEvent( this.dispatchCustomEvent(
"ak-dual-select-selected-move-changed", "ak-dual-select-selected-move-changed",
Array.from(this.toMove.values()).sort() Array.from(this.toMove.values()).sort(),
); );
this.dispatchCustomEvent("ak-dual-select-move"); this.dispatchCustomEvent("ak-dual-select-move");
// Necessary because updating a map won't trigger a state change // Necessary because updating a map won't trigger a state change

2
web/src/elements/ak-dual-select/components/ak-pagination.ts
View File

@ -54,7 +54,7 @@ export class AkPagination extends CustomEmitterElement(AKElement) {
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain"> <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text"> <span class="pf-c-options-menu__toggle-text">
${msg( ${msg(
str`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}` str`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}`,
)} )}
</span> </span>
</div> </div>

44
web/src/elements/ak-dual-select/components/styles.css.ts
View File

@ -126,35 +126,33 @@ export const mainStyles = css`
`; `;
export const listStyles = css` export const listStyles = css`
:host { :host {
display: block; display: block;
overflow: hidden; overflow: hidden;
max-width: 100%; max-width: 100%;
} }
.pf-c-dual-list-selector__menu { .pf-c-dual-list-selector__menu {
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
} }
.pf-c-dual-list-selector__list { .pf-c-dual-list-selector__list {
max-width: 100%; max-width: 100%;
display: block; display: block;
} }
.pf-c-dual-list-selector__item { .pf-c-dual-list-selector__item {
padding: 0.25rem; padding: 0.25rem;
width: auto; width: auto;
} }
.pf-c-dual-list-selector__item-text {
user-select: none;
flex-grow: 0;
}
.pf-c-dual-list-selector__item-text {
user-select: none;
flex-grow: 0;
}
`; `;
export const selectedPaneStyles = css` export const selectedPaneStyles = css`
input[type="checkbox"][readonly] { input[type="checkbox"][readonly] {
pointer-events: none; pointer-events: none;

3
web/src/elements/ak-dual-select/index.ts
View File

@ -1,8 +1,7 @@
import { AkDualSelect } from "./ak-dual-select"; import { AkDualSelect } from "./ak-dual-select";
import "./ak-dual-select"; import "./ak-dual-select";
import { AkDualSelectProvider } from "./ak-dual-select-provider"; import { AkDualSelectProvider } from "./ak-dual-select-provider";
import "./ak-dual-select-provider"; import "./ak-dual-select-provider";
export { AkDualSelect, AkDualSelectProvider } export { AkDualSelect, AkDualSelectProvider };
export default AkDualSelect; export default AkDualSelect;

8
web/src/elements/ak-dual-select/stories/ak-dual-select-available-pane.stories.ts
View File

@ -5,8 +5,8 @@ import { slug } from "github-slugger";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import "../components/ak-dual-select-available-pane"; import "../components/ak-dual-select-available-pane";
import "./sb-host-provider";
import { AkDualSelectAvailablePane } from "../components/ak-dual-select-available-pane"; import { AkDualSelectAvailablePane } from "../components/ak-dual-select-available-pane";
import "./sb-host-provider";
const metadata: Meta<AkDualSelectAvailablePane> = { const metadata: Meta<AkDualSelectAvailablePane> = {
title: "Elements / Dual Select / Available Items Pane", title: "Elements / Dual Select / Available Items Pane",
@ -47,9 +47,7 @@ const container = (testItem: TemplateResult) =>
} }
</style> </style>
<ak-message-container></ak-message-container> <ak-message-container></ak-message-container>
<sb-dual-select-host-provider> <sb-dual-select-host-provider> ${testItem} </sb-dual-select-host-provider>
${testItem}
</sb-dual-select-host-provider>
<p>Messages received from the button:</p> <p>Messages received from the button:</p>
<ul id="action-button-message-pad" style="margin-top: 1em"></ul> <ul id="action-button-message-pad" style="margin-top: 1em"></ul>
</div>`; </div>`;
@ -112,6 +110,6 @@ export const SomeSelected: Story = {
html` <ak-dual-select-available-pane html` <ak-dual-select-available-pane
.options=${goodForYouPairs} .options=${goodForYouPairs}
.selected=${someSelected} .selected=${someSelected}
></ak-dual-select-available-pane>`, ></ak-dual-select-available-pane>`,
), ),
}; };

41
web/src/elements/ak-dual-select/stories/ak-dual-select-master.stories.ts
View File

@ -1,16 +1,15 @@
import "@goauthentik/elements/messages/MessageContainer"; import "@goauthentik/elements/messages/MessageContainer";
import { LitElement, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { Meta, StoryObj } from "@storybook/web-components"; import { Meta, StoryObj } from "@storybook/web-components";
import { slug } from "github-slugger"; import { slug } from "github-slugger";
import { LitElement, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import type { DualSelectPair } from "../types";
import { Pagination } from "@goauthentik/api"; import { Pagination } from "@goauthentik/api";
import "../ak-dual-select"; import "../ak-dual-select";
import { AkDualSelect } from "../ak-dual-select"; import { AkDualSelect } from "../ak-dual-select";
import type { DualSelectPair } from "../types";
const goodForYouRaw = ` const goodForYouRaw = `
Apple, Arrowroot, Artichoke, Arugula, Asparagus, Avocado, Bamboo, Banana, Basil, Beet Root, Apple, Arrowroot, Artichoke, Arugula, Asparagus, Avocado, Bamboo, Banana, Basil, Beet Root,
@ -25,8 +24,8 @@ Rosemary, Rutabaga, Shallot, Soybeans, Spinach, Squash, Strawberries, Sweet pota
Thyme, Tomatillo, Tomato, Turnip, Waterchestnut, Watercress, Watermelon, Yams Thyme, Tomatillo, Tomato, Turnip, Waterchestnut, Watercress, Watermelon, Yams
`; `;
const keyToPair = (key: string): DualSelectPair => ([slug(key), key]); const keyToPair = (key: string): DualSelectPair => [slug(key), key];
const goodForYou: DualSelectPair[] = goodForYouRaw const goodForYou: DualSelectPair[] = goodForYouRaw
.replace("\n", " ") .replace("\n", " ")
.split(",") .split(",")
.map((a: string) => a.trim()) .map((a: string) => a.trim())
@ -61,8 +60,8 @@ const metadata: Meta<AkDualSelect> = {
export default metadata; export default metadata;
@customElement("ak-sb-fruity") @customElement("ak-sb-fruity")
// @ts-ignore
class AkSbFruity extends LitElement { class AkSbFruity extends LitElement {
@property({ type: Array }) @property({ type: Array })
options: DualSelectPair[] = goodForYou; options: DualSelectPair[] = goodForYou;
@ -81,18 +80,19 @@ class AkSbFruity extends LitElement {
endIndex: this.options.length > this.pageLength ? this.pageLength : this.options.length, endIndex: this.options.length > this.pageLength ? this.pageLength : this.options.length,
next: this.options.length > this.pageLength ? 2 : 0, next: this.options.length > this.pageLength ? 2 : 0,
previous: 0, previous: 0,
totalPages: Math.ceil(this.options.length / this.pageLength) totalPages: Math.ceil(this.options.length / this.pageLength),
}; };
this.onNavigation = this.onNavigation.bind(this); this.onNavigation = this.onNavigation.bind(this);
this.addEventListener('ak-pagination-nav-to', this.addEventListener("ak-pagination-nav-to", this.onNavigation);
this.onNavigation);
} }
onNavigation(evt: Event) { onNavigation(evt: Event) {
const current: number = (evt as CustomEvent).detail; const current: number = (evt as CustomEvent).detail;
const index = current - 1; const index = current - 1;
if ((index * this.pageLength) > this.options.length) { if (index * this.pageLength > this.options.length) {
console.warn(`Attempted to index from ${index} for options length ${this.options.length}`); console.warn(
`Attempted to index from ${index} for options length ${this.options.length}`,
);
return; return;
} }
const endCount = this.pageLength * (index + 1); const endCount = this.pageLength * (index + 1);
@ -103,22 +103,26 @@ class AkSbFruity extends LitElement {
current, current,
startIndex: this.pageLength * index + 1, startIndex: this.pageLength * index + 1,
endIndex, endIndex,
next: ((index + 1) * this.pageLength > this.options.length) ? 0 : current + 1, next: (index + 1) * this.pageLength > this.options.length ? 0 : current + 1,
previous: index previous: index,
}; };
} }
get pageoptions() { get pageoptions() {
return this.options.slice(this.pageLength * (this.page.current - 1), return this.options.slice(
this.pageLength * (this.page.current)); this.pageLength * (this.page.current - 1),
this.pageLength * this.page.current,
);
} }
render() { render() {
return html`<ak-dual-select .options=${this.pageoptions} .pages=${this.page}></ak-dual-select>`; return html`<ak-dual-select
.options=${this.pageoptions}
.pages=${this.page}
></ak-dual-select>`;
} }
} }
const container = (testItem: TemplateResult) => const container = (testItem: TemplateResult) =>
html` <div style="background: #fff; padding: 2em"> html` <div style="background: #fff; padding: 2em">
<style> <style>
@ -139,6 +143,7 @@ const container = (testItem: TemplateResult) =>
const handleMoveChanged = (result: any) => { const handleMoveChanged = (result: any) => {
const target = document.querySelector("#action-button-message-pad"); const target = document.querySelector("#action-button-message-pad");
target!.innerHTML = ""; target!.innerHTML = "";
// @ts-ignore
target!.append(result.detail.value.map(([k, _]) => k).join(", ")); target!.append(result.detail.value.map(([k, _]) => k).join(", "));
}; };

9
web/src/elements/ak-dual-select/stories/ak-dual-select-selected-pane.stories.ts
View File

@ -5,8 +5,8 @@ import { slug } from "github-slugger";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import "../components/ak-dual-select-selected-pane"; import "../components/ak-dual-select-selected-pane";
import "./sb-host-provider";
import { AkDualSelectSelectedPane } from "../components/ak-dual-select-selected-pane"; import { AkDualSelectSelectedPane } from "../components/ak-dual-select-selected-pane";
import "./sb-host-provider";
const metadata: Meta<AkDualSelectSelectedPane> = { const metadata: Meta<AkDualSelectSelectedPane> = {
title: "Elements / Dual Select / Selected Items Pane", title: "Elements / Dual Select / Selected Items Pane",
@ -19,6 +19,7 @@ const metadata: Meta<AkDualSelectSelectedPane> = {
}, },
}, },
argTypes: { argTypes: {
// @ts-ignore
options: { options: {
type: "string", type: "string",
description: "An array of [key, label] pairs of what to show", description: "An array of [key, label] pairs of what to show",
@ -42,10 +43,8 @@ const container = (testItem: TemplateResult) =>
margin-top: 1em; margin-top: 1em;
} }
</style> </style>
<ak-message-container></ak-message-container> <ak-message-container></ak-message-container>
<sb-dual-select-host-provider> <sb-dual-select-host-provider> ${testItem} </sb-dual-select-host-provider>
${testItem}
</sb-dual-select-host-provider>
<p>Messages received from the button:</p> <p>Messages received from the button:</p>
<ul id="action-button-message-pad" style="margin-top: 1em"></ul> <ul id="action-button-message-pad" style="margin-top: 1em"></ul>
</div>`; </div>`;

5
web/src/elements/ak-dual-select/stories/sb-host-provider.ts
View File

@ -1,7 +1,8 @@
import { html, LitElement } from "lit"; import { LitElement, html } from "lit";
import { globalVariables } from "../components/styles.css";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import { globalVariables } from "../components/styles.css";
/** /**
* @element sb-dual-select-host-provider * @element sb-dual-select-host-provider
* *

2
web/src/elements/ak-dual-select/types.ts
View File

@ -12,6 +12,6 @@ export type BasePagination = Pick<
export type DataProvision = { export type DataProvision = {
pagination: Pagination; pagination: Pagination;
options: DualSelectPair[]; options: DualSelectPair[];
} };
export type DataProvider = (page: number) => Promise<DataProvision>; export type DataProvider = (page: number) => Promise<DataProvision>;