Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | import { LightningElement, api } from 'lwc';
import { normalizeString } from 'sds/utils';
/**
* Size options for empty state illustrations
* @enum {string}
*/
const SIZE = {
XSMALL: 'xsmall',
SMALL: 'small',
MEDIUM: 'medium',
DEFAULT: '',
};
export default class EmptyState extends LightningElement {
// Render component in native shadow mode
static shadowSupportMode = 'native';
// _privateHeadingAriaLevel sets aria-level and is a pattern used in LBC components
_privateHeadingAriaLevel;
/**
* Define a empty state illustration set name.
*
* @type {string}
*/
@api set;
/**
* Define a empty state illustration symbol name.
*
* @type {string}
*/
@api symbol;
/**
* Define a empty state illustration size.
* Valid values: 'xsmall', 'small', 'medium', '' (default)
*
* @type {string}
*/
@api
get size() {
return this._size;
}
set size(value) {
this._size = normalizeString(value, {
fallbackValue: SIZE.DEFAULT,
validValues: Object.values(SIZE),
});
}
/**
* Define a empty state title.
*
* @type {string}
*/
@api title;
/**
* Changes the 'aria-level' attribute value for the
* <h3> markup tag in the card's title element. Supported values
* are (1, 2, 3, 4, 5, 6).
* @type {string | number}
*/
@api
get headingLevel() {
return this._privateHeadingAriaLevel;
}
set headingLevel(value) {
this._privateHeadingAriaLevel = value;
}
/**
* Alternative text.
* Recommended to use for accessibility if title is not provided.
* (But not required)
*
* @type {string}
*/
@api alternativeText;
/**
* Description is required API
* Warning is shown if description slot is not provided
*/
checkSlotDescriptionRequired() {
const descriptionSlot = this.template.querySelector('slot[name="description"]');
const noDescriptionSlot = descriptionSlot?.assignedNodes().length === 0;
if (noDescriptionSlot) {
const tagName = this.tagName.toLocaleLowerCase();
console.warn(`<${tagName}> Missing required "description" slot.`);
}
}
get sizeClasses() {
if (this.size === 'medium') {
return `slds-illustration_medium`;
} else if (this.size === 'small') {
return `slds-illustration_small`;
} else if (this.size === 'xsmall') {
return `slds-illustration_xsmall`;
} else {
return `slds-illustration_default`;
}
}
get hasIllustration() {
return this.set && this.symbol;
}
renderedCallback() {
this.checkSlotDescriptionRequired();
}
}
|