@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
100 lines (98 loc) • 3.35 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* 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 "../../globals/settings.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import { error403SVG } from "./assets/error403SVG.js";
import { error404SVG } from "./assets/error404SVG.js";
import { errorGenericSVG } from "./assets/errorGenericSVG.js";
import "./types.js";
import full_page_error_default$1 from "./full-page-error.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
//#region src/components/full-page-error/full-page-error.ts
/**
* @license
*
* Copyright IBM Corp. 2025, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const componentName = "full-page-error";
const blockClass = `c4p--${componentName}`;
const elementName = `c4p-${componentName}`;
const errorData = {
["403"]: { svg: error403SVG },
["404"]: { svg: error404SVG },
["custom"]: { svg: errorGenericSVG }
};
/**
* FullPageError.
*
* @element c4p-full-page-error
*/
let CDSFullPageError = class CDSFullPageError extends LitElement {
constructor(..._args) {
super(..._args);
this.label = "Error Label";
this.kind = "custom";
this.title = "Title";
}
static {
this.styles = full_page_error_default$1;
}
render() {
return html` <div class=${blockClass} role="main">
<div class=${`${blockClass}__container`}>
<div class=${`${blockClass}__grid cds-custom--css-grid `}>
<div
class=${`${blockClass}__column cds-custom--css-grid-column cds-custom--sm:col-span-4 cds-custom--md:col-span-3 cds-custom--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=${`cds-custom--css-grid-column cds-custom--sm:col-span-4 cds-custom--md:col-span-5 cds-custom--lg:col-span-10`}
>
<div class=${`${blockClass}__svg-container`}>
${errorData[this.kind].svg}
</div>
</div>
</div>
</div>
</div>`;
}
};
__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 full_page_error_default = CDSFullPageError;
//#endregion
export { blockClass, full_page_error_default as default };
//# sourceMappingURL=full-page-error.js.map