@jupyter/web-components
Version:
A component library for building extensions in Jupyter frontends.
68 lines (67 loc) • 2.06 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 { Anchor, anchorTemplate as template } from '@microsoft/fast-foundation';
import { anchorStyles as styles } from './anchor.styles.js';
/**
* Anchor class
* @public
* @tagname jp-anchor
*/
class JupyterAnchor extends Anchor {
appearanceChanged(oldValue, newValue) {
if (this.$fastController.isConnected) {
this.classList.remove(oldValue);
this.classList.add(newValue);
}
}
connectedCallback() {
super.connectedCallback();
if (!this.appearance) {
this.appearance = 'neutral';
}
}
/**
* Applies 'icon-only' class when there is only an SVG in the default slot
*
* @internal
*
*/
defaultSlottedContentChanged(oldValue, newValue) {
const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);
if (slottedElements.length === 1 &&
slottedElements[0] instanceof SVGElement) {
this.control.classList.add('icon-only');
}
else {
this.control.classList.remove('icon-only');
}
}
}
__decorate([
attr
], JupyterAnchor.prototype, "appearance", void 0);
/**
* A function that returns a {@link @microsoft/fast-foundation#Anchor} registration for configuring the component with a DesignSystem.
* Implements {@link @microsoft/fast-foundation#anchorTemplate}
*
*
* @public
* @remarks
* Generates HTML Element: `<jp-anchor>`
*
* {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
*/
export const jpAnchor = JupyterAnchor.compose({
baseName: 'anchor',
baseClass: Anchor,
template,
styles,
shadowOptions: {
delegatesFocus: true
}
});
export { JupyterAnchor as Anchor };
export { styles as anchorStyles };