@api-client/ui 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/src/core/ModalActivity.d.ts +4 -0
- package/build/src/core/ModalActivity.d.ts.map +1 -1
- package/build/src/core/ModalActivity.js +4 -1
- package/build/src/core/ModalActivity.js.map +1 -1
- package/build/src/elements/http/HttpAssertions.styles.js +1 -1
- package/build/src/elements/http/HttpAssertions.styles.js.map +1 -1
- package/build/src/md/chip/internals/Chip.d.ts +1 -0
- package/build/src/md/chip/internals/Chip.d.ts.map +1 -1
- package/build/src/md/chip/internals/Chip.js +1 -0
- package/build/src/md/chip/internals/Chip.js.map +1 -1
- package/build/src/md/dialog/internals/Dialog.styles.js +1 -1
- package/build/src/md/dialog/internals/Dialog.styles.js.map +1 -1
- package/package.json +1 -1
- package/src/core/ModalActivity.ts +8 -1
- package/src/elements/http/HttpAssertions.styles.ts +1 -1
- package/src/md/chip/internals/Chip.ts +1 -0
- package/src/md/dialog/internals/Dialog.styles.ts +1 -1
|
@@ -12,6 +12,10 @@ export interface ActionButtonInit {
|
|
|
12
12
|
* Whether the button is disabled.
|
|
13
13
|
*/
|
|
14
14
|
disabled?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Optional callback to be called when the button is clicked.
|
|
17
|
+
*/
|
|
18
|
+
callback?: (e: MouseEvent) => void;
|
|
15
19
|
}
|
|
16
20
|
/**
|
|
17
21
|
* A special kind of activity that renders content in a modal dialog.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalActivity.d.ts","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAI7E,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"ModalActivity.d.ts","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAI7E,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CACnC;AAED;;;;;;;;;GASG;AACH,8BAAsB,aAAc,SAAQ,QAAQ;IAClD;;OAEG;IACH,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAK;IACrD;;OAEG;IACM,QAAQ,CAAC,MAAM,UAAO;IAE/B;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IAEhB,QAAQ,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQtC,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW,CAAC,qBAAqB,CAAC,GAAG,IAAI;IASzE;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKpD;;;;OAIG;IAEH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAIpD;;;OAGG;IACH,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAI5C;;;OAGG;IACH,YAAY,IAAI,cAAc;IAW9B;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc;IAc5E;;;OAGG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc;IAO3E;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc;IAgB3E;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;CAGrD"}
|
|
@@ -134,7 +134,9 @@ let ModalActivity = (() => {
|
|
|
134
134
|
*/
|
|
135
135
|
renderNegativeButton(init = {}) {
|
|
136
136
|
const { label = 'Cancel' } = init;
|
|
137
|
-
return html `<ui-text-button slot="button" type="button" value="dismiss"
|
|
137
|
+
return html `<ui-text-button slot="button" type="button" value="dismiss" @click="${init.callback}"
|
|
138
|
+
>${label}</ui-text-button
|
|
139
|
+
>`;
|
|
138
140
|
}
|
|
139
141
|
/**
|
|
140
142
|
* Renders the submit button for the dialog.
|
|
@@ -153,6 +155,7 @@ let ModalActivity = (() => {
|
|
|
153
155
|
type="${type}"
|
|
154
156
|
value="confirm"
|
|
155
157
|
form="${ifDefined(formId)}"
|
|
158
|
+
@click="${init.callback}"
|
|
156
159
|
>${label}</ui-text-button
|
|
157
160
|
>`;
|
|
158
161
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalActivity.js","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;
|
|
1
|
+
{"version":3,"file":"ModalActivity.js","sourceRoot":"","sources":["../../../src/core/ModalActivity.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type TemplateResult } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { Activity } from './Activity.js'\nimport type { UiDialogClosingReason } from '../md/dialog/internals/Dialog.js'\nimport state from '../decorators/state.js'\nimport { IntentResult } from './ActivityManager.js'\n\nimport '../md/dialog/ui-dialog.js'\nimport '../md/button/ui-text-button.js'\n\nexport interface ActionButtonInit {\n /**\n * The label to use for the button.\n */\n label?: string\n /**\n * Whether the button is disabled.\n */\n disabled?: boolean\n /**\n * Optional callback to be called when the button is clicked.\n */\n callback?: (e: MouseEvent) => void\n}\n\n/**\n * A special kind of activity that renders content in a modal dialog.\n * When a modal activity is running the underlying activities are paused.\n *\n * A modal activity uses the UiDialogElement to render its content. The dialog\n * is inserted directly into the `<body>` element of the document and rendered\n * in the top layer. Because of that, the modal activity does not support\n * regular rendering logic. It creates its own render root that is used to render\n * the template.\n */\nexport abstract class ModalActivity extends Activity {\n /**\n * The list of classes to apply to the dialog.\n */\n protected dialogClasses: Record<string, boolean> = {}\n /**\n * Controls dialog visibility without controlling the activity state.\n */\n @state() accessor opened = true\n\n /**\n * The id of the form used to render the dialog.\n */\n protected formId?: string\n\n override onResume(): void | Promise<void> {\n this.renderRoot = document.createElement('div')\n this.renderRoot.classList.add('modal-activity-container')\n document.body.appendChild(this.renderRoot)\n super.onResume()\n this.requestUpdate()\n }\n\n override async finish(): Promise<void> {\n if (this.renderRoot) {\n document.body.removeChild(this.renderRoot)\n this.renderRoot = undefined\n }\n await super.finish()\n }\n\n protected handleDialogClosed(e: CustomEvent<UiDialogClosingReason>): void {\n const { cancelled, value } = e.detail\n if (cancelled) {\n this.handleNegativeAction(value)\n } else {\n this.handlePositiveAction(value)\n }\n }\n\n /**\n * Called when the dialog is closed with a negative action.\n * Override this function to handle the negative action.\n * @param value The value passed to the dialog when it is closed.\n */\n protected handleNegativeAction(value: unknown): void {\n this.setResult(IntentResult.RESULT_CANCELED, value)\n this.finish()\n }\n\n /**\n * Called when the dialog is closed with a positive action.\n * Override this function to handle the positive action.\n * @param value The value passed to the dialog when it is closed.\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected handlePositiveAction(value: unknown): void {\n this.finish()\n }\n\n /**\n * Override this method to handle the form submission.\n * @param e The submit event.\n */\n protected handleSubmit(e: SubmitEvent): void {\n e.preventDefault()\n }\n\n /**\n * The function called by the rendered when rendering this dialog.\n * This way, the `render()` function is still used as the primary template provider.\n */\n renderDialog(): TemplateResult {\n const classes = {\n activityDialog: true,\n [this.constructor.name.toLowerCase()]: true,\n ...this.dialogClasses,\n }\n return html`<ui-dialog modal .open=\"${this.opened}\" class=\"${classMap(classes)}\" @close=\"${this.handleDialogClosed}\"\n >${this.render()}</ui-dialog\n >`\n }\n\n /**\n * Used with dialogs that render forms. Override the `handleSubmit` method\n * to handle the form submission.\n * @param content The content to render in the form.\n * @param name Optional form name\n */\n protected renderForm(content: TemplateResult, name?: string): TemplateResult {\n if (!this.formId) {\n this.formId = `form-${this.constructor.name.toLowerCase()}`\n }\n return html`<form\n id=\"${this.formId}\"\n name=\"${ifDefined(name)}\"\n class=\"dialog-content\"\n @submit=\"${this.handleSubmit}\"\n >\n ${content}\n </form>`\n }\n\n /**\n * Renders the cancel button for the dialog.\n * @param label The label to use for the cancel button.\n */\n protected renderNegativeButton(init: ActionButtonInit = {}): TemplateResult {\n const { label = 'Cancel' } = init\n return html`<ui-text-button slot=\"button\" type=\"button\" value=\"dismiss\" @click=\"${init.callback}\"\n >${label}</ui-text-button\n >`\n }\n\n /**\n * Renders the submit button for the dialog.\n * If the formId is set, the button will be a submit button.\n * Otherwise, it will be a regular button.\n * @param label The label to use for the submit button.\n */\n protected renderPositiveButton(init: ActionButtonInit = {}): TemplateResult {\n const { label = 'OK', disabled = false } = init\n const { formId } = this\n const type = formId ? 'submit' : 'button'\n // UI buttons have a proper support for form association.\n return html`<ui-text-button\n slot=\"button\"\n ?disabled=\"${disabled}\"\n type=\"${type}\"\n value=\"confirm\"\n form=\"${ifDefined(formId)}\"\n @click=\"${init.callback}\"\n >${label}</ui-text-button\n >`\n }\n\n /**\n * Renders the title for the dialog.\n * @param title The title to render in the dialog.\n */\n protected renderTitle(title: string): TemplateResult {\n return html`<span slot=\"title\">${title}</span>`\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HttpAssertions.styles.js","sourceRoot":"","sources":["../../../../src/elements/http/HttpAssertions.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n .param-row {\n margin-bottom: 24px;\n border-radius: var(--md-sys-shape-corner-small);\n }\n\n .action-actions {\n display: flex;\n align-items: center;\n }\n\n .rename-dialog {\n --ui-dialog
|
|
1
|
+
{"version":3,"file":"HttpAssertions.styles.js","sourceRoot":"","sources":["../../../../src/elements/http/HttpAssertions.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n .param-row {\n margin-bottom: 24px;\n border-radius: var(--md-sys-shape-corner-small);\n }\n\n .action-actions {\n display: flex;\n align-items: center;\n }\n\n .rename-dialog {\n --ui-dialog-width: 420px;\n }\n\n .rename-dialog .input {\n width: 100%;\n }\n\n .toggle-button {\n margin-left: 12px;\n }\n`\n"]}
|
|
@@ -10,6 +10,7 @@ export declare enum ChipType {
|
|
|
10
10
|
suggestion = "suggestion"
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
+
* @slot The content of the chip.
|
|
13
14
|
* @slot icon - The leading icon, sized 18x18 px
|
|
14
15
|
* @slot avatar - The leading image, sized 24x24 px
|
|
15
16
|
* @fires list - When the user requested to activate the list associated with the element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAInE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAIvD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,2BAA2B,CAAA;AAElC,oBAAY,QAAQ;IAClB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,UAAU,eAAe;CAC1B;AAED
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAInE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAIvD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,2BAA2B,CAAA;AAElC,oBAAY,QAAQ;IAClB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,UAAU,eAAe;CAC1B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,SAAS;IAC3C;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;;OAKG;IACyB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAA;IAEnD;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAElF;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAElF;;;;OAIG;IACyC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAEjF;;;;;;OAMG;IACwC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAEnD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;IAEpE,SAAS,CAAC,QAAQ,CAAC,UAAU,UAAQ;IAE9C;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IAE5C;;OAEG;IACM,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;;IAwBrC,iBAAiB,IAAI,IAAI;cAUf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM7C,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;cAO5B,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAKjC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAKrC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;cAW7C,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;cAK5B,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAK3C,SAAS,CAAC,QAAQ,CAAC,SAAS,QAAO,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAG1D;IAEQ,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAYpC,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAOzC;;OAEG;IACH,aAAa,IAAI,IAAI;IAKrB;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAK9C;;OAEG;IACH,SAAS,CAAC,sBAAsB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKhD,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAMzC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;cAMrB,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;cAI5B,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;cAIxB,MAAM,IAAI,cAAc;IAqB3C,SAAS,CAAC,iBAAiB,IAAI,cAAc,GAAG,OAAO,OAAO;IAgB9D,SAAS,CAAC,YAAY,IAAI,cAAc,GAAG,OAAO,OAAO;IAQzD,SAAS,CAAC,kBAAkB,IAAI,cAAc,GAAG,OAAO,OAAO;IA0B/D,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;CACF"}
|
|
@@ -347,6 +347,7 @@ let UiChip = (() => {
|
|
|
347
347
|
};
|
|
348
348
|
})();
|
|
349
349
|
/**
|
|
350
|
+
* @slot The content of the chip.
|
|
350
351
|
* @slot icon - The leading icon, sized 18x18 px
|
|
351
352
|
* @slot avatar - The leading image, sized 24x24 px
|
|
352
353
|
* @fires list - When the user requested to activate the list associated with the element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { cancelEvent } from '@api-client/core/lib/events/Utils.js'\nimport { html, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { property, queryAsync, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { when } from 'lit/directives/when.js'\nimport { UiElement } from '../../UiElement.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport { close, arrowDropDown, check } from '../../icons/Icons.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport '../../ripple/ui-ripple.js'\n\nexport enum ChipType {\n assist = 'assist',\n filter = 'filter',\n input = 'input',\n suggestion = 'suggestion',\n}\n\n/**\n * @slot icon - The leading icon, sized 18x18 px\n * @slot avatar - The leading image, sized 24x24 px\n * @fires list - When the user requested to activate the list associated with the element.\n * @fires select - When the checked state changed through a user interaction. This only related to\n * `filter` chips. Note, `select` is dispatched just before the `click` event.\n */\nexport default class UiChip extends UiElement {\n /**\n * Whether the chip is disabled. The user can't interact with the chip when `true`.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n /**\n * The type of the rendered chip.\n * @attribute\n *\n * @see https://m3.material.io/components/chips/guidelines\n */\n @property({ type: String }) accessor type: ChipType\n\n /**\n * Whether the chip should be rendered as elevated.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor elevated: boolean | undefined\n\n /**\n * Whether the chip renders the \"close\" icon at the end.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor closable: boolean | undefined\n\n /**\n * Whether the chip is currently checked.\n * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor checked: boolean | undefined\n\n /**\n * The ID attribute of the list element that is rendered after activating the chip.\n * When this is set the chip renders the dropdown icon at the end and sets `aria-*`\n * attributes informing the assistive technology that this chip controls a list.\n *\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor list: string | undefined\n\n @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>\n\n @state() protected accessor showRipple = false\n\n /**\n * Determines when the element has an icon in the \"icon\" slot.\n */\n @state() protected accessor hasIcon: boolean\n\n /**\n * Determines when the element has an image in the \"avatar\" slot.\n */\n @state() protected accessor hasAvatar: boolean\n\n constructor() {\n super()\n\n this.disabled = false\n this.type = ChipType.assist\n this.hasIcon = false\n this.hasAvatar = false\n\n this.actionController.cancelKeyboardEvents = true\n\n this.addEventListener('click', this.handleClick.bind(this))\n this.addEventListener('keydown', this.handleKeyDown.bind(this))\n this.addEventListener('keyup', this.handleKeyUp.bind(this))\n this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n this.addEventListener('focus', this.handleFocus.bind(this))\n this.addEventListener('blur', this.handleBlur.bind(this))\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'button')\n }\n if (!this.hasAttribute('tabindex') && !this.disabled) {\n this.setAttribute('tabindex', '0')\n }\n }\n\n protected override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('disabled')) {\n setDisabled(this, cp.get('disabled'))\n }\n }\n\n protected async pressRipple(): Promise<void> {\n const element = await this.getRipple()\n if (element && !element.isPressed) {\n element.beginPress()\n }\n }\n\n protected async endRipple(): Promise<void> {\n const element = await this.getRipple()\n element?.endPress()\n }\n\n override beginPress(options: BeginPressConfig): void {\n super.beginPress(options)\n this.pressRipple()\n }\n\n override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n super.handleKeyDown(e)\n if (this.type === ChipType.filter && e.code === 'ArrowDown') {\n e.preventDefault()\n this.listAction()\n } else if (this.closable && e.code === 'Backspace') {\n e.preventDefault()\n this.closeAction()\n }\n }\n\n protected async handleFocus(): Promise<void> {\n const element = await this.getRipple()\n element?.beginFocus()\n }\n\n protected async handleBlur(): Promise<void> {\n const element = await this.getRipple()\n element?.endFocus()\n }\n\n protected readonly getRipple = (): Promise<UiRipple | null> => {\n this.showRipple = true\n return this.ripple\n }\n\n override endPress(info: EndPressConfig): void {\n super.endPress(info)\n this.endRipple()\n const { cancelled, reason } = info\n if (cancelled) {\n return\n }\n if (reason === 'enter' || reason === 'space') {\n this.click()\n }\n }\n\n override handleClick(e: MouseEvent): void {\n super.handleClick(e)\n if (this.type === ChipType.filter) {\n this.toggleChecked()\n }\n }\n\n /**\n * Toggles the \"filter\" type of the chip.\n */\n toggleChecked(): void {\n this.checked = !this.checked\n this.dispatchEvent(new Event('select'))\n }\n\n /**\n * Sets the `hasIcon` state property when the \"icon\" slot change event is dispatched.\n */\n protected handleIconSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement\n this.hasIcon = !!slot.assignedNodes().length\n }\n\n /**\n * Sets the `_hasAvatar` state property when the \"avatar\" slot change event is dispatched.\n */\n protected handleAvatarSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement\n this.hasAvatar = !!slot.assignedNodes().length\n }\n\n protected handleListClick(e: Event): void {\n e.preventDefault()\n e.stopPropagation()\n this.listAction()\n }\n\n protected handleClose(e: Event): void {\n e.preventDefault()\n e.stopPropagation()\n this.closeAction()\n }\n\n protected async closeAction(): Promise<void> {\n this.dispatchEvent(new Event('close'))\n }\n\n protected async listAction(): Promise<void> {\n this.dispatchEvent(new Event('list'))\n }\n\n protected override render(): TemplateResult {\n const { pressed = false } = this\n const containerClasses = classMap({\n surface: true,\n withIcon: this.hasIcon,\n withAvatar: this.hasAvatar,\n pressed,\n })\n return html`\n <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n <div class=\"container\"></div>\n ${when(this.showRipple, this.renderRipple)}\n <div class=\"content\">\n ${this.renderLeadingIcon()} ${this.renderAvatar()}\n <slot></slot>\n ${this.renderTrailingIcon()}\n </div>\n </div>\n `\n }\n\n protected renderLeadingIcon(): TemplateResult | typeof nothing {\n const { type } = this\n if (type === ChipType.suggestion) {\n return nothing\n }\n if (type === ChipType.filter) {\n const iconClasses = classMap({\n 'leading-icon': true,\n 'check-mark': true,\n 'checked': !!this.checked,\n })\n return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`\n }\n return html`<slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot>`\n }\n\n protected renderAvatar(): TemplateResult | typeof nothing {\n const { type } = this\n if (type === ChipType.input) {\n return html`<slot name=\"avatar\" @slotchange=\"${this.handleAvatarSlotChange}\"></slot>`\n }\n return nothing\n }\n\n protected renderTrailingIcon(): TemplateResult | typeof nothing {\n const { closable = false, list, type } = this\n if (type === ChipType.filter) {\n if (list) {\n return html`<span\n class=\"trailing-icon\"\n role=\"presentation\"\n @click=\"${this.handleListClick}\"\n @keypress=\"${cancelEvent}\"\n >${arrowDropDown}</span\n >`\n }\n }\n if (type === ChipType.input && closable) {\n return html`<span\n class=\"trailing-icon\"\n @click=\"${this.handleClose}\"\n @keypress=\"${cancelEvent}\"\n role=\"button\"\n aria-label=\"Activate to close or disabled this chip.\"\n >${close}</span\n >`\n }\n return nothing\n }\n\n protected renderRipple = (): TemplateResult => {\n const { disabled } = this\n return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { cancelEvent } from '@api-client/core/lib/events/Utils.js'\nimport { html, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { property, queryAsync, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { when } from 'lit/directives/when.js'\nimport { UiElement } from '../../UiElement.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport { close, arrowDropDown, check } from '../../icons/Icons.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport '../../ripple/ui-ripple.js'\n\nexport enum ChipType {\n assist = 'assist',\n filter = 'filter',\n input = 'input',\n suggestion = 'suggestion',\n}\n\n/**\n * @slot The content of the chip.\n * @slot icon - The leading icon, sized 18x18 px\n * @slot avatar - The leading image, sized 24x24 px\n * @fires list - When the user requested to activate the list associated with the element.\n * @fires select - When the checked state changed through a user interaction. This only related to\n * `filter` chips. Note, `select` is dispatched just before the `click` event.\n */\nexport default class UiChip extends UiElement {\n /**\n * Whether the chip is disabled. The user can't interact with the chip when `true`.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n /**\n * The type of the rendered chip.\n * @attribute\n *\n * @see https://m3.material.io/components/chips/guidelines\n */\n @property({ type: String }) accessor type: ChipType\n\n /**\n * Whether the chip should be rendered as elevated.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor elevated: boolean | undefined\n\n /**\n * Whether the chip renders the \"close\" icon at the end.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor closable: boolean | undefined\n\n /**\n * Whether the chip is currently checked.\n * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor checked: boolean | undefined\n\n /**\n * The ID attribute of the list element that is rendered after activating the chip.\n * When this is set the chip renders the dropdown icon at the end and sets `aria-*`\n * attributes informing the assistive technology that this chip controls a list.\n *\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor list: string | undefined\n\n @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>\n\n @state() protected accessor showRipple = false\n\n /**\n * Determines when the element has an icon in the \"icon\" slot.\n */\n @state() protected accessor hasIcon: boolean\n\n /**\n * Determines when the element has an image in the \"avatar\" slot.\n */\n @state() protected accessor hasAvatar: boolean\n\n constructor() {\n super()\n\n this.disabled = false\n this.type = ChipType.assist\n this.hasIcon = false\n this.hasAvatar = false\n\n this.actionController.cancelKeyboardEvents = true\n\n this.addEventListener('click', this.handleClick.bind(this))\n this.addEventListener('keydown', this.handleKeyDown.bind(this))\n this.addEventListener('keyup', this.handleKeyUp.bind(this))\n this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n this.addEventListener('focus', this.handleFocus.bind(this))\n this.addEventListener('blur', this.handleBlur.bind(this))\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'button')\n }\n if (!this.hasAttribute('tabindex') && !this.disabled) {\n this.setAttribute('tabindex', '0')\n }\n }\n\n protected override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('disabled')) {\n setDisabled(this, cp.get('disabled'))\n }\n }\n\n protected async pressRipple(): Promise<void> {\n const element = await this.getRipple()\n if (element && !element.isPressed) {\n element.beginPress()\n }\n }\n\n protected async endRipple(): Promise<void> {\n const element = await this.getRipple()\n element?.endPress()\n }\n\n override beginPress(options: BeginPressConfig): void {\n super.beginPress(options)\n this.pressRipple()\n }\n\n override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n super.handleKeyDown(e)\n if (this.type === ChipType.filter && e.code === 'ArrowDown') {\n e.preventDefault()\n this.listAction()\n } else if (this.closable && e.code === 'Backspace') {\n e.preventDefault()\n this.closeAction()\n }\n }\n\n protected async handleFocus(): Promise<void> {\n const element = await this.getRipple()\n element?.beginFocus()\n }\n\n protected async handleBlur(): Promise<void> {\n const element = await this.getRipple()\n element?.endFocus()\n }\n\n protected readonly getRipple = (): Promise<UiRipple | null> => {\n this.showRipple = true\n return this.ripple\n }\n\n override endPress(info: EndPressConfig): void {\n super.endPress(info)\n this.endRipple()\n const { cancelled, reason } = info\n if (cancelled) {\n return\n }\n if (reason === 'enter' || reason === 'space') {\n this.click()\n }\n }\n\n override handleClick(e: MouseEvent): void {\n super.handleClick(e)\n if (this.type === ChipType.filter) {\n this.toggleChecked()\n }\n }\n\n /**\n * Toggles the \"filter\" type of the chip.\n */\n toggleChecked(): void {\n this.checked = !this.checked\n this.dispatchEvent(new Event('select'))\n }\n\n /**\n * Sets the `hasIcon` state property when the \"icon\" slot change event is dispatched.\n */\n protected handleIconSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement\n this.hasIcon = !!slot.assignedNodes().length\n }\n\n /**\n * Sets the `_hasAvatar` state property when the \"avatar\" slot change event is dispatched.\n */\n protected handleAvatarSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement\n this.hasAvatar = !!slot.assignedNodes().length\n }\n\n protected handleListClick(e: Event): void {\n e.preventDefault()\n e.stopPropagation()\n this.listAction()\n }\n\n protected handleClose(e: Event): void {\n e.preventDefault()\n e.stopPropagation()\n this.closeAction()\n }\n\n protected async closeAction(): Promise<void> {\n this.dispatchEvent(new Event('close'))\n }\n\n protected async listAction(): Promise<void> {\n this.dispatchEvent(new Event('list'))\n }\n\n protected override render(): TemplateResult {\n const { pressed = false } = this\n const containerClasses = classMap({\n surface: true,\n withIcon: this.hasIcon,\n withAvatar: this.hasAvatar,\n pressed,\n })\n return html`\n <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n <div class=\"container\"></div>\n ${when(this.showRipple, this.renderRipple)}\n <div class=\"content\">\n ${this.renderLeadingIcon()} ${this.renderAvatar()}\n <slot></slot>\n ${this.renderTrailingIcon()}\n </div>\n </div>\n `\n }\n\n protected renderLeadingIcon(): TemplateResult | typeof nothing {\n const { type } = this\n if (type === ChipType.suggestion) {\n return nothing\n }\n if (type === ChipType.filter) {\n const iconClasses = classMap({\n 'leading-icon': true,\n 'check-mark': true,\n 'checked': !!this.checked,\n })\n return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`\n }\n return html`<slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot>`\n }\n\n protected renderAvatar(): TemplateResult | typeof nothing {\n const { type } = this\n if (type === ChipType.input) {\n return html`<slot name=\"avatar\" @slotchange=\"${this.handleAvatarSlotChange}\"></slot>`\n }\n return nothing\n }\n\n protected renderTrailingIcon(): TemplateResult | typeof nothing {\n const { closable = false, list, type } = this\n if (type === ChipType.filter) {\n if (list) {\n return html`<span\n class=\"trailing-icon\"\n role=\"presentation\"\n @click=\"${this.handleListClick}\"\n @keypress=\"${cancelEvent}\"\n >${arrowDropDown}</span\n >`\n }\n }\n if (type === ChipType.input && closable) {\n return html`<span\n class=\"trailing-icon\"\n @click=\"${this.handleClose}\"\n @keypress=\"${cancelEvent}\"\n role=\"button\"\n aria-label=\"Activate to close or disabled this chip.\"\n >${close}</span\n >`\n }\n return nothing\n }\n\n protected renderRipple = (): TemplateResult => {\n const { disabled } = this\n return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`\n }\n}\n"]}
|
|
@@ -17,7 +17,7 @@ export default css `
|
|
|
17
17
|
|
|
18
18
|
max-width: var(--ui-dialog-max-width, revert);
|
|
19
19
|
max-height: var(--ui-dialog-max-height, revert);
|
|
20
|
-
width: var(--ui-dialog
|
|
20
|
+
width: var(--ui-dialog-width, revert);
|
|
21
21
|
height: var(--ui-dialog-height, revert);
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: contents;\n }\n\n dialog {\n overflow: hidden;\n /* Do not override the display value here. It will render the dialog even when hidden */\n\n border: none;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--md-sys-elevation-3);\n color: var(--md-sys-color-on-surface-variant);\n padding: 24px;\n\n max-width: var(--ui-dialog-max-width, revert);\n max-height: var(--ui-dialog-max-height, revert);\n width: var(--ui-dialog
|
|
1
|
+
{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: contents;\n }\n\n dialog {\n overflow: hidden;\n /* Do not override the display value here. It will render the dialog even when hidden */\n\n border: none;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface);\n box-shadow: var(--md-sys-elevation-3);\n color: var(--md-sys-color-on-surface-variant);\n padding: 24px;\n\n max-width: var(--ui-dialog-max-width, revert);\n max-height: var(--ui-dialog-max-height, revert);\n width: var(--ui-dialog-width, revert);\n height: var(--ui-dialog-height, revert);\n }\n\n dialog::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: var(--md-sys-color-surface-tint);\n opacity: 0.11;\n pointer-events: none;\n }\n\n dialog:open {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n }\n\n dialog:open::backdrop {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n }\n\n .icon {\n display: none;\n }\n\n .icon.with-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .icon ::slotted(*) {\n color: var(--md-sys-color-secondary);\n fill: var(--md-sys-color-secondary);\n width: 24px;\n height: 24px;\n }\n\n .title {\n display: none;\n color: var(--md-sys-color-on-surface);\n font-family: var(--md-sys-typescale-headline-small-font);\n font-weight: var(--md-sys-typescale-headline-small-weight);\n font-size: var(--md-sys-typescale-headline-small-size);\n letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n line-height: var(--md-sys-typescale-headline-small-height);\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .title.with-title {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .content {\n overflow: auto;\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n }\n\n .buttons {\n display: none;\n display: flex;\n align-items: center;\n justify-content: end;\n }\n\n .buttons.with-buttons {\n margin-top: 24px;\n }\n\n .buttons ::slotted(:not(:last-child)) {\n margin-right: 12px;\n }\n\n @keyframes show-dialog {\n from {\n transform: translateY(-110%) scaleY(0);\n }\n to {\n transform: translateY(0%) scaleY(1);\n }\n }\n\n @keyframes show-backdrop {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`\n"]}
|
package/package.json
CHANGED
|
@@ -18,6 +18,10 @@ export interface ActionButtonInit {
|
|
|
18
18
|
* Whether the button is disabled.
|
|
19
19
|
*/
|
|
20
20
|
disabled?: boolean
|
|
21
|
+
/**
|
|
22
|
+
* Optional callback to be called when the button is clicked.
|
|
23
|
+
*/
|
|
24
|
+
callback?: (e: MouseEvent) => void
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
/**
|
|
@@ -139,7 +143,9 @@ export abstract class ModalActivity extends Activity {
|
|
|
139
143
|
*/
|
|
140
144
|
protected renderNegativeButton(init: ActionButtonInit = {}): TemplateResult {
|
|
141
145
|
const { label = 'Cancel' } = init
|
|
142
|
-
return html`<ui-text-button slot="button" type="button" value="dismiss"
|
|
146
|
+
return html`<ui-text-button slot="button" type="button" value="dismiss" @click="${init.callback}"
|
|
147
|
+
>${label}</ui-text-button
|
|
148
|
+
>`
|
|
143
149
|
}
|
|
144
150
|
|
|
145
151
|
/**
|
|
@@ -159,6 +165,7 @@ export abstract class ModalActivity extends Activity {
|
|
|
159
165
|
type="${type}"
|
|
160
166
|
value="confirm"
|
|
161
167
|
form="${ifDefined(formId)}"
|
|
168
|
+
@click="${init.callback}"
|
|
162
169
|
>${label}</ui-text-button
|
|
163
170
|
>`
|
|
164
171
|
}
|
|
@@ -19,6 +19,7 @@ export enum ChipType {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
|
+
* @slot The content of the chip.
|
|
22
23
|
* @slot icon - The leading icon, sized 18x18 px
|
|
23
24
|
* @slot avatar - The leading image, sized 24x24 px
|
|
24
25
|
* @fires list - When the user requested to activate the list associated with the element.
|
|
@@ -18,7 +18,7 @@ export default css`
|
|
|
18
18
|
|
|
19
19
|
max-width: var(--ui-dialog-max-width, revert);
|
|
20
20
|
max-height: var(--ui-dialog-max-height, revert);
|
|
21
|
-
width: var(--ui-dialog
|
|
21
|
+
width: var(--ui-dialog-width, revert);
|
|
22
22
|
height: var(--ui-dialog-height, revert);
|
|
23
23
|
}
|
|
24
24
|
|