@jupyter-notebook/web-components
Version:
A component library for building extensions in Jupyter frontends.
61 lines (60 loc) • 1.86 kB
JavaScript
// Copyright (c) Jupyter Development Team.
// Copyright (c) Microsoft Corporation.
// Distributed under the terms of the Modified BSD License.
import { __decorate } from "tslib";
import { attr } from '@microsoft/fast-element';
import { Button as FoundationButton, buttonTemplate as template } from '@microsoft/fast-foundation';
import { buttonStyles } from './button.styles';
/**
* @internal
*/
export class Button extends FoundationButton {
connectedCallback() {
super.connectedCallback();
if (!this.appearance) {
this.appearance = 'neutral';
}
}
/**
* Applies 'icon-only' class when there is only an SVG in the default slot
*
* @public
* @remarks
*/
defaultSlottedContentChanged(oldValue, newValue) {
const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);
if (slottedElements.length === 1 &&
(slottedElements[0] instanceof SVGElement ||
slottedElements[0].classList.contains('fa') ||
slottedElements[0].classList.contains('fas'))) {
this.control.classList.add('icon-only');
}
else {
this.control.classList.remove('icon-only');
}
}
}
__decorate([
attr
], Button.prototype, "appearance", void 0);
__decorate([
attr({ attribute: 'minimal', mode: 'boolean' })
], Button.prototype, "minimal", void 0);
/**
* The button component registration.
*
* @public
* @remarks
* Generated HTML Element: `<jp-button>`
*
* {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
*/
export const jpButton = Button.compose({
baseName: 'button',
baseClass: FoundationButton,
template,
styles: buttonStyles,
shadowOptions: {
delegatesFocus: true
}
});