@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
103 lines (99 loc) • 3.44 kB
JavaScript
/**
* Copyright IBM Corp. 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { __decorate } from 'tslib';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import { prefix, carbonPrefix } from '../../globals/settings.js';
import { error403SVG } from './assets/error403SVG.js';
import { error404SVG } from './assets/error404SVG.js';
import { errorGenericSVG } from './assets/errorGenericSVG.js';
import { Kind } from './types.js';
import styles from './full-page-error.scss.js';
const componentName = 'full-page-error';
const blockClass = `${prefix}--${componentName}`;
const elementName = `${prefix}-${componentName}`; // c4p-full-page-error
const errorData = {
[Kind.Error403]: {
svg: error403SVG,
},
[Kind.Error404]: {
svg: error404SVG,
},
[Kind.Custom]: {
svg: errorGenericSVG,
},
};
/**
* FullPageError.
*
* @element c4p-full-page-error
*/
let CDSFullPageError = class CDSFullPageError extends LitElement {
constructor() {
super(...arguments);
/**
* Sets the label text
*/
this.label = 'Error Label';
/**
* Sets what kind of error it is. '404' | '403' | 'custom'
*/
this.kind = Kind.Custom;
/**
* Sets the title text
*/
this.title = 'Title';
}
render() {
return html ` <div class=${blockClass} role="main">
<div class=${`${blockClass}__container`}>
<div class=${`${blockClass}__grid ${carbonPrefix}--css-grid `}>
<div
class=${`${blockClass}__column ${carbonPrefix}--css-grid-column ${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-3 ${carbonPrefix}--lg:col-span-6`}
>
<h1 class=${`${blockClass}__title`}>
<span class=${`${blockClass}__label`}>
<span aria-hidden="true">↳ </span>
${this.label}
</span>
<span>${this.title}</span>
</h1>
<p class=${`${blockClass}__description`}>${this.description}</p>
<div class=${`${blockClass}__body`}><slot></slot></div>
</div>
<div
class=${`${carbonPrefix}--css-grid-column ${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-5 ${carbonPrefix}--lg:col-span-10`}
>
<div class=${`${blockClass}__svg-container`}>
${errorData[this.kind].svg}
</div>
</div>
</div>
</div>
</div>`;
}
};
CDSFullPageError.styles = styles;
__decorate([
property({ type: String, reflect: true })
], CDSFullPageError.prototype, "label", void 0);
__decorate([
property({ type: String, reflect: true })
], CDSFullPageError.prototype, "description", void 0);
__decorate([
property({ type: String, reflect: true })
], CDSFullPageError.prototype, "kind", void 0);
__decorate([
property({ type: String, reflect: true })
], CDSFullPageError.prototype, "title", void 0);
CDSFullPageError = __decorate([
carbonElement(elementName)
], CDSFullPageError);
var CDSFullPageError$1 = CDSFullPageError;
export { blockClass, CDSFullPageError$1 as default };
//# sourceMappingURL=full-page-error.js.map