@leanix/components 0.4.736 → 0.4.738
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -344,51 +344,21 @@ class BadgeComponent {
|
|
|
344
344
|
* The color of the badge component
|
|
345
345
|
*/
|
|
346
346
|
this.color = 'blue';
|
|
347
|
-
/**
|
|
348
|
-
* If set to true, the badge will create a color for itself based on the content, ignoring other color settings.
|
|
349
|
-
* This could be useful if we want to show a range of different colors for different contents.
|
|
350
|
-
*/
|
|
351
|
-
this.calculateColorsDynamically = false;
|
|
352
|
-
/** @internal */
|
|
353
|
-
this.textColor = '';
|
|
354
|
-
/** @internal */
|
|
355
|
-
this.backGroundColor = '';
|
|
356
|
-
}
|
|
357
|
-
ngOnInit() {
|
|
358
|
-
if (this.calculateColorsDynamically) {
|
|
359
|
-
this.calculateColorsFromText();
|
|
360
|
-
}
|
|
361
347
|
}
|
|
362
348
|
get colorClass() {
|
|
363
|
-
|
|
364
|
-
return '';
|
|
365
|
-
}
|
|
366
|
-
else {
|
|
367
|
-
return `${this.color}`;
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
calculateColorsFromText() {
|
|
371
|
-
let hash = 0;
|
|
372
|
-
const contentAsString = String(this.content);
|
|
373
|
-
for (let i = 0; i < contentAsString.length; i++) {
|
|
374
|
-
hash = contentAsString.charCodeAt(i) + ((hash << 5) - hash);
|
|
375
|
-
}
|
|
376
|
-
this.backGroundColor = `hsla(${hash % 360}, 100%, 58%, 0.12)`;
|
|
377
|
-
this.textColor = `hsl(${hash % 360}, 100%, 28%)`;
|
|
349
|
+
return `${this.color}`;
|
|
378
350
|
}
|
|
379
351
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
352
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: BadgeComponent, isStandalone: true, selector: "lx-badge", inputs: { content: "content", color: "color" }, ngImport: i0, template: "<div class=\"wrapper\" [class]=\"colorClass\">\n <span>{{ content }}</span>\n</div>\n", styles: [".wrapper{border-radius:2px;padding:2px 4px;height:20px;max-width:max-content;font-weight:var(--lxFontSemibold, 600);font-size:var(--lxFontSmallSize, 12px);letter-spacing:.3px}.gray{background-color:#f0f2f5;color:#3e495b}.blue{background-color:#e9f3ff;color:#0a3e6b}.green{background-color:#ebfaee;color:#145027}.red{background-color:#feefef;color:#731616}.yellow{background-color:#fff8ea;color:#78350f}.purple{background-color:#f4efff;color:#531991}.white{background-color:#fff;color:#2a303d;border:1px solid #c2c9d6}\n"] }); }
|
|
381
353
|
}
|
|
382
354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
383
355
|
type: Component,
|
|
384
|
-
args: [{ selector: 'lx-badge', template: "
|
|
356
|
+
args: [{ selector: 'lx-badge', template: "<div class=\"wrapper\" [class]=\"colorClass\">\n <span>{{ content }}</span>\n</div>\n", styles: [".wrapper{border-radius:2px;padding:2px 4px;height:20px;max-width:max-content;font-weight:var(--lxFontSemibold, 600);font-size:var(--lxFontSmallSize, 12px);letter-spacing:.3px}.gray{background-color:#f0f2f5;color:#3e495b}.blue{background-color:#e9f3ff;color:#0a3e6b}.green{background-color:#ebfaee;color:#145027}.red{background-color:#feefef;color:#731616}.yellow{background-color:#fff8ea;color:#78350f}.purple{background-color:#f4efff;color:#531991}.white{background-color:#fff;color:#2a303d;border:1px solid #c2c9d6}\n"] }]
|
|
385
357
|
}], propDecorators: { content: [{
|
|
386
358
|
type: Input,
|
|
387
359
|
args: [{ required: true }]
|
|
388
360
|
}], color: [{
|
|
389
361
|
type: Input
|
|
390
|
-
}], calculateColorsDynamically: [{
|
|
391
|
-
type: Input
|
|
392
362
|
}] } });
|
|
393
363
|
|
|
394
364
|
const BANNER_TYPE = {
|
|
@@ -701,11 +671,11 @@ class CollapsibleComponent {
|
|
|
701
671
|
}
|
|
702
672
|
}
|
|
703
673
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
704
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CollapsibleComponent, isStandalone: true, selector: "lx-collapsible", inputs: { disableSectionToggle: "disableSectionToggle", hideSectionToggle: "hideSectionToggle", toggleSize: "toggleSize", toggleTitle: "toggleTitle", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.notClickable": "this.notClickable" } }, ngImport: i0, template: "@if (!hideSectionToggle) {\n <button\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n [class.collapsed]=\"collapsed\"\n type=\"button\"\n [disabled]=\"disableSectionToggle\"\n [square]=\"true\"\n icon=\"
|
|
674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CollapsibleComponent, isStandalone: true, selector: "lx-collapsible", inputs: { disableSectionToggle: "disableSectionToggle", hideSectionToggle: "hideSectionToggle", toggleSize: "toggleSize", toggleTitle: "toggleTitle", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.notClickable": "this.notClickable" } }, ngImport: i0, template: "@if (!hideSectionToggle) {\n <button\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n [class.collapsed]=\"collapsed\"\n type=\"button\"\n [disabled]=\"disableSectionToggle\"\n [square]=\"true\"\n icon=\"slim-arrow-down\"\n (click)=\"onToggleSection($event)\"\n ></button>\n}\n<div class=\"collapsible-title\">\n <ng-content />\n</div>\n", styles: [":host{position:relative;cursor:pointer;display:flex;border-bottom:1px solid #c2c9d6;align-items:center;margin-bottom:4px}:host.notClickable{cursor:default}.sectionToggle{transition:transform .2s linear}.sectionToggle.collapsed{transform:rotate(-90deg)}.collapsible-title{width:100%;align-self:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
705
675
|
}
|
|
706
676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CollapsibleComponent, decorators: [{
|
|
707
677
|
type: Component,
|
|
708
|
-
args: [{ selector: 'lx-collapsible', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent], template: "@if (!hideSectionToggle) {\n <button\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n [class.collapsed]=\"collapsed\"\n type=\"button\"\n [disabled]=\"disableSectionToggle\"\n [square]=\"true\"\n icon=\"
|
|
678
|
+
args: [{ selector: 'lx-collapsible', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent], template: "@if (!hideSectionToggle) {\n <button\n lx-button\n mode=\"link\"\n [title]=\"toggleTitle\"\n [size]=\"toggleSize\"\n class=\"sectionToggle\"\n [class.collapsed]=\"collapsed\"\n type=\"button\"\n [disabled]=\"disableSectionToggle\"\n [square]=\"true\"\n icon=\"slim-arrow-down\"\n (click)=\"onToggleSection($event)\"\n ></button>\n}\n<div class=\"collapsible-title\">\n <ng-content />\n</div>\n", styles: [":host{position:relative;cursor:pointer;display:flex;border-bottom:1px solid #c2c9d6;align-items:center;margin-bottom:4px}:host.notClickable{cursor:default}.sectionToggle{transition:transform .2s linear}.sectionToggle.collapsed{transform:rotate(-90deg)}.collapsible-title{width:100%;align-self:center}\n"] }]
|
|
709
679
|
}], propDecorators: { disableSectionToggle: [{
|
|
710
680
|
type: Input
|
|
711
681
|
}], hideSectionToggle: [{
|