@spscommerce/ds-web-components 4.5.0 → 4.7.1
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.
- package/lib/index.cjs.js +234 -234
- package/lib/index.esm.js +234 -234
- package/package.json +5 -5
package/lib/index.cjs.js
CHANGED
|
@@ -2624,218 +2624,6 @@ var SpsFileUploadExamples = {
|
|
|
2624
2624
|
};
|
|
2625
2625
|
var templateObject_1$3, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
2626
2626
|
|
|
2627
|
-
var CPT_NAME$2 = 'sps-insights';
|
|
2628
|
-
/** Container for Insight Cards. */
|
|
2629
|
-
var SpsInsightsComponent = /** @class */ (function (_super) {
|
|
2630
|
-
__extends(SpsInsightsComponent, _super);
|
|
2631
|
-
function SpsInsightsComponent() {
|
|
2632
|
-
var _this = _super.call(this) || this;
|
|
2633
|
-
_this.content = [];
|
|
2634
|
-
_this.showAdditionalInsights = false;
|
|
2635
|
-
_this.toggleAdditionalInsights = _this.toggleAdditionalInsights.bind(_this);
|
|
2636
|
-
return _this;
|
|
2637
|
-
}
|
|
2638
|
-
Object.defineProperty(SpsInsightsComponent.prototype, ClassBindings, {
|
|
2639
|
-
get: function () {
|
|
2640
|
-
return [
|
|
2641
|
-
CPT_NAME$2,
|
|
2642
|
-
this.showAdditionalInsights && CPT_NAME$2 + "--show-additional",
|
|
2643
|
-
this.details && Array.from(this.details).every(function (d) { return !d.textContent; })
|
|
2644
|
-
? CPT_NAME$2 + "--no-details"
|
|
2645
|
-
: null,
|
|
2646
|
-
this.content.length === 6 ? CPT_NAME$2 + "--break-4" : null,
|
|
2647
|
-
this.content.length === 7 ? CPT_NAME$2 + "--break-5" : null,
|
|
2648
|
-
this.content.length === 8 ? CPT_NAME$2 + "--break-5" : null,
|
|
2649
|
-
];
|
|
2650
|
-
},
|
|
2651
|
-
enumerable: false,
|
|
2652
|
-
configurable: true
|
|
2653
|
-
});
|
|
2654
|
-
/** Only the first ten Insight Cards are visible by default; the rest are behind
|
|
2655
|
-
* the "Show Additional Insights"/"Hide Additional Insights" button. This method
|
|
2656
|
-
* will toggle the additional insights.
|
|
2657
|
-
*/
|
|
2658
|
-
SpsInsightsComponent.prototype.toggleAdditionalInsights = function () {
|
|
2659
|
-
this.showAdditionalInsights = !this.showAdditionalInsights;
|
|
2660
|
-
this.update();
|
|
2661
|
-
};
|
|
2662
|
-
SpsInsightsComponent.prototype.render = function () {
|
|
2663
|
-
return (h("div", { "data-fragment": true },
|
|
2664
|
-
this.content,
|
|
2665
|
-
this.content.length > 10
|
|
2666
|
-
&& (h("div", { className: "sps-button sps-button--link", onClick: this.toggleAdditionalInsights },
|
|
2667
|
-
h("button", { type: "button" },
|
|
2668
|
-
this.showAdditionalInsights ? 'Hide ' : 'Show ',
|
|
2669
|
-
"Additional Insights")))));
|
|
2670
|
-
};
|
|
2671
|
-
SpsInsightsComponent.displayName = CPT_NAME$2;
|
|
2672
|
-
SpsInsightsComponent.props = {};
|
|
2673
|
-
__decorate([
|
|
2674
|
-
Content(),
|
|
2675
|
-
__metadata("design:type", Object)
|
|
2676
|
-
], SpsInsightsComponent.prototype, "content", void 0);
|
|
2677
|
-
__decorate([
|
|
2678
|
-
QuerySelectorAll('.sps-insight-card__detail'),
|
|
2679
|
-
__metadata("design:type", NodeList)
|
|
2680
|
-
], SpsInsightsComponent.prototype, "details", void 0);
|
|
2681
|
-
SpsInsightsComponent = __decorate([
|
|
2682
|
-
Component({ tag: CPT_NAME$2 }),
|
|
2683
|
-
__metadata("design:paramtypes", [])
|
|
2684
|
-
], SpsInsightsComponent);
|
|
2685
|
-
return SpsInsightsComponent;
|
|
2686
|
-
}(HTMLElement));
|
|
2687
|
-
|
|
2688
|
-
var CPT_NAME$1 = 'sps-insight-card';
|
|
2689
|
-
var SpsInsightCardComponent = /** @class */ (function (_super) {
|
|
2690
|
-
__extends(SpsInsightCardComponent, _super);
|
|
2691
|
-
function SpsInsightCardComponent() {
|
|
2692
|
-
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
2693
|
-
/** Specifies which of the visual styling variants of the Insight Card to use. */
|
|
2694
|
-
_this.kind = dsShared.SpsInsightCardKind.GENERAL;
|
|
2695
|
-
return _this;
|
|
2696
|
-
}
|
|
2697
|
-
Object.defineProperty(SpsInsightCardComponent.prototype, ClassBindings, {
|
|
2698
|
-
get: function () {
|
|
2699
|
-
return [
|
|
2700
|
-
CPT_NAME$1,
|
|
2701
|
-
CPT_NAME$1 + "--" + this.kind,
|
|
2702
|
-
this.detail && this.detail.children.length ? CPT_NAME$1 + "--has-detail" : null,
|
|
2703
|
-
];
|
|
2704
|
-
},
|
|
2705
|
-
enumerable: false,
|
|
2706
|
-
configurable: true
|
|
2707
|
-
});
|
|
2708
|
-
SpsInsightCardComponent.prototype.render = function (_a) {
|
|
2709
|
-
var t = _a.t;
|
|
2710
|
-
var metric = h("div", { className: CPT_NAME$1 + "__metric-count" }, this.metric);
|
|
2711
|
-
var description = (h("div", { className: CPT_NAME$1 + "__description" },
|
|
2712
|
-
h("div", { className: CPT_NAME$1 + "__title",
|
|
2713
|
-
// Both Chrome & FF ignore -webkit-box-orient in the actual CSS for some reason
|
|
2714
|
-
// Also the TS types don't think -webkit-box-orient is a real CSS property
|
|
2715
|
-
style: { '-webkit-box-orient': 'vertical' } }, this.title),
|
|
2716
|
-
h("div", { className: CPT_NAME$1 + "__detail" }, this.content)));
|
|
2717
|
-
var _b = __read((this.partnerCount
|
|
2718
|
-
? t('design-system:insightCard.partnerCount', { count: this.partnerCount, total: this.totalPartners })
|
|
2719
|
-
: '').split('|'), 3), count = _b[0], ofText = _b[1], total = _b[2];
|
|
2720
|
-
return (h("div", { "data-fragment": true },
|
|
2721
|
-
h("div", { className: CPT_NAME$1 + "__body" },
|
|
2722
|
-
this.icon ? h("i", { className: "sps-icon sps-icon-" + this.icon }) : h("i", { className: "sps-icon sps-icon-" + dsShared.SpsInsightCardIcons[this.kind] }),
|
|
2723
|
-
metric,
|
|
2724
|
-
description),
|
|
2725
|
-
this.partnerCount && (h("div", { className: CPT_NAME$1 + "__partner-count" },
|
|
2726
|
-
this.partnerCount === this.totalPartners
|
|
2727
|
-
? h("div", null, t('design-system:insightCard.all'))
|
|
2728
|
-
: (h("div", { "data-fragment": true },
|
|
2729
|
-
h("div", null, count),
|
|
2730
|
-
h("div", null, ofText),
|
|
2731
|
-
h("div", null, total))),
|
|
2732
|
-
h("div", { className: CPT_NAME$1 + "__partners-text" }, t('design-system:insightCard.partners'))))));
|
|
2733
|
-
};
|
|
2734
|
-
SpsInsightCardComponent.displayName = CPT_NAME$1;
|
|
2735
|
-
SpsInsightCardComponent.props = {
|
|
2736
|
-
icon: 'SpsIcon',
|
|
2737
|
-
kind: 'SpsInsightCardKind',
|
|
2738
|
-
title: 'string',
|
|
2739
|
-
metric: 'number',
|
|
2740
|
-
partnerCount: 'number',
|
|
2741
|
-
totalPartners: 'number',
|
|
2742
|
-
secondary: 'boolean',
|
|
2743
|
-
};
|
|
2744
|
-
__decorate([
|
|
2745
|
-
Prop(),
|
|
2746
|
-
__metadata("design:type", String)
|
|
2747
|
-
], SpsInsightCardComponent.prototype, "icon", void 0);
|
|
2748
|
-
__decorate([
|
|
2749
|
-
Prop(),
|
|
2750
|
-
__metadata("design:type", Object)
|
|
2751
|
-
], SpsInsightCardComponent.prototype, "kind", void 0);
|
|
2752
|
-
__decorate([
|
|
2753
|
-
Prop(),
|
|
2754
|
-
__metadata("design:type", String)
|
|
2755
|
-
], SpsInsightCardComponent.prototype, "title", void 0);
|
|
2756
|
-
__decorate([
|
|
2757
|
-
Prop(),
|
|
2758
|
-
__metadata("design:type", Number)
|
|
2759
|
-
], SpsInsightCardComponent.prototype, "metric", void 0);
|
|
2760
|
-
__decorate([
|
|
2761
|
-
Prop(),
|
|
2762
|
-
__metadata("design:type", Number)
|
|
2763
|
-
], SpsInsightCardComponent.prototype, "partnerCount", void 0);
|
|
2764
|
-
__decorate([
|
|
2765
|
-
Prop(),
|
|
2766
|
-
__metadata("design:type", Number)
|
|
2767
|
-
], SpsInsightCardComponent.prototype, "totalPartners", void 0);
|
|
2768
|
-
__decorate([
|
|
2769
|
-
Prop(),
|
|
2770
|
-
__metadata("design:type", Boolean)
|
|
2771
|
-
], SpsInsightCardComponent.prototype, "secondary", void 0);
|
|
2772
|
-
__decorate([
|
|
2773
|
-
Content(),
|
|
2774
|
-
__metadata("design:type", Object)
|
|
2775
|
-
], SpsInsightCardComponent.prototype, "content", void 0);
|
|
2776
|
-
__decorate([
|
|
2777
|
-
QuerySelector("." + CPT_NAME$1 + "__detail"),
|
|
2778
|
-
__metadata("design:type", Object)
|
|
2779
|
-
], SpsInsightCardComponent.prototype, "detail", void 0);
|
|
2780
|
-
SpsInsightCardComponent = __decorate([
|
|
2781
|
-
Component({ tag: CPT_NAME$1 })
|
|
2782
|
-
], SpsInsightCardComponent);
|
|
2783
|
-
return SpsInsightCardComponent;
|
|
2784
|
-
}(HTMLElement));
|
|
2785
|
-
|
|
2786
|
-
var SpsInsightCardExamples = {
|
|
2787
|
-
basic: {
|
|
2788
|
-
label: 'Basic Insight Cards',
|
|
2789
|
-
examples: {
|
|
2790
|
-
basic: {
|
|
2791
|
-
jsx: utils.code(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n "]))),
|
|
2792
|
-
},
|
|
2793
|
-
},
|
|
2794
|
-
},
|
|
2795
|
-
details: {
|
|
2796
|
-
label: 'With Details',
|
|
2797
|
-
examples: {
|
|
2798
|
-
details: {
|
|
2799
|
-
jsx: utils.code(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "]))),
|
|
2800
|
-
},
|
|
2801
|
-
},
|
|
2802
|
-
},
|
|
2803
|
-
partner_count: {
|
|
2804
|
-
label: 'Partner Count',
|
|
2805
|
-
examples: {
|
|
2806
|
-
partner_count: {
|
|
2807
|
-
jsx: utils.code(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n ></sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n ></sps-insight-card>\n </sps-insights>\n "]))),
|
|
2808
|
-
},
|
|
2809
|
-
},
|
|
2810
|
-
},
|
|
2811
|
-
expansion: {
|
|
2812
|
-
label: '10+ Insight Cards',
|
|
2813
|
-
examples: {
|
|
2814
|
-
expansion: {
|
|
2815
|
-
jsx: utils.code(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "]))),
|
|
2816
|
-
},
|
|
2817
|
-
},
|
|
2818
|
-
},
|
|
2819
|
-
events: {
|
|
2820
|
-
label: 'Adding a click handler',
|
|
2821
|
-
description: utils.code(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n Here is how to do it:</p>\n "], ["\n <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n Here is how to do it:</p>\n "]))),
|
|
2822
|
-
examples: {
|
|
2823
|
-
events: {
|
|
2824
|
-
react: utils.code(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n function Component() {\n function handleClick() {\n window.alert(\"Insight card clicked\");\n }\n\n const ref = React.useRef();\n React.useEffect(() => {\n ref.current.addEventListener(\"click\", handleClick);\n return () => {\n ref.current.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n return (\n <sps-insights>\n <sps-insight-card ref={ref}\n kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n );\n }\n "], ["\n function Component() {\n function handleClick() {\n window.alert(\"Insight card clicked\");\n }\n\n const ref = React.useRef();\n React.useEffect(() => {\n ref.current.addEventListener(\"click\", handleClick);\n return () => {\n ref.current.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n return (\n <sps-insights>\n <sps-insight-card ref={ref}\n kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n );\n }\n "]))),
|
|
2825
|
-
},
|
|
2826
|
-
},
|
|
2827
|
-
},
|
|
2828
|
-
alternateIcon: {
|
|
2829
|
-
label: 'Using alternate icons',
|
|
2830
|
-
examples: {
|
|
2831
|
-
basic: {
|
|
2832
|
-
react: utils.code(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n function DemoComponent() {\n return (\n <sps-insights>\n <sps-insight-card\n kind=\"general\"\n metric=\"1234\"\n icon={SpsIcon.DOLLAR_SIGN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"processing\"\n metric=\"1234\"\n icon={SpsIcon.ASTERISK}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"success\"\n metric=\"1234\"\n icon={SpsIcon.USER}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"warning\"\n metric=\"1234\"\n icon={SpsIcon.FOLDER_OPEN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"error\"\n metric=\"1234\"\n icon={SpsIcon.BAN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n )\n }\n "], ["\n function DemoComponent() {\n return (\n <sps-insights>\n <sps-insight-card\n kind=\"general\"\n metric=\"1234\"\n icon={SpsIcon.DOLLAR_SIGN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"processing\"\n metric=\"1234\"\n icon={SpsIcon.ASTERISK}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"success\"\n metric=\"1234\"\n icon={SpsIcon.USER}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"warning\"\n metric=\"1234\"\n icon={SpsIcon.FOLDER_OPEN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"error\"\n metric=\"1234\"\n icon={SpsIcon.BAN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n )\n }\n "]))),
|
|
2833
|
-
},
|
|
2834
|
-
},
|
|
2835
|
-
},
|
|
2836
|
-
};
|
|
2837
|
-
var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
2838
|
-
|
|
2839
2627
|
var SpsNavTabComponent = /** @class */ (function (_super) {
|
|
2840
2628
|
__extends(SpsNavTabComponent, _super);
|
|
2841
2629
|
function SpsNavTabComponent() {
|
|
@@ -2926,22 +2714,22 @@ var SpsNavTabSetComponent = /** @class */ (function (_super) {
|
|
|
2926
2714
|
var SpsNavTabsExamples = {
|
|
2927
2715
|
basic: {
|
|
2928
2716
|
label: 'Basic Navigation Tabs',
|
|
2929
|
-
description: utils.code(templateObject_1$
|
|
2717
|
+
description: utils.code(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n <p>Navigation tabs native web component</p>\n "], ["\n <p>Navigation tabs native web component</p>\n "]))),
|
|
2930
2718
|
examples: {
|
|
2931
2719
|
basic: {
|
|
2932
|
-
react: utils.code(templateObject_2$
|
|
2720
|
+
react: utils.code(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n function DemoComponent() {\n const tabs = [\n { label: \"Tab A\", icon: \"chart-line\" },\n { label: \"Tab B\", icon: \"chart-bar\", tag: \"12\" },\n { label: \"Tab C\", icon: \"chart-pie\" }\n ]\n\n const [activeTab, setActiveTab] = React.useState(0)\n\n return (\n <sps-nav-tab-set>\n {tabs.map((tab, index) => (\n <sps-nav-tab\n key={index}\n icon={tab.icon}\n label={tab.label}\n tag={tab.tag}\n active={index === activeTab || null}\n onClick={() => setActiveTab(index)}\n />\n ))}\n </sps-nav-tab-set>\n )\n }\n "], ["\n function DemoComponent() {\n const tabs = [\n { label: \"Tab A\", icon: \"chart-line\" },\n { label: \"Tab B\", icon: \"chart-bar\", tag: \"12\" },\n { label: \"Tab C\", icon: \"chart-pie\" }\n ]\n\n const [activeTab, setActiveTab] = React.useState(0)\n\n return (\n <sps-nav-tab-set>\n {tabs.map((tab, index) => (\n <sps-nav-tab\n key={index}\n icon={tab.icon}\n label={tab.label}\n tag={tab.tag}\n active={index === activeTab || null}\n onClick={() => setActiveTab(index)}\n />\n ))}\n </sps-nav-tab-set>\n )\n }\n "]))),
|
|
2933
2721
|
},
|
|
2934
2722
|
},
|
|
2935
2723
|
},
|
|
2936
2724
|
};
|
|
2937
|
-
var templateObject_1$
|
|
2725
|
+
var templateObject_1$2, templateObject_2$2;
|
|
2938
2726
|
|
|
2939
2727
|
exports.SpsPhotoDisplayMode = void 0;
|
|
2940
2728
|
(function (SpsPhotoDisplayMode) {
|
|
2941
2729
|
SpsPhotoDisplayMode["FIT"] = "fit";
|
|
2942
2730
|
SpsPhotoDisplayMode["FILL"] = "fill";
|
|
2943
2731
|
})(exports.SpsPhotoDisplayMode || (exports.SpsPhotoDisplayMode = {}));
|
|
2944
|
-
var CPT_NAME = 'sps-photo';
|
|
2732
|
+
var CPT_NAME$2 = 'sps-photo';
|
|
2945
2733
|
var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
2946
2734
|
__extends(SpsPhotoComponent, _super);
|
|
2947
2735
|
function SpsPhotoComponent() {
|
|
@@ -2980,11 +2768,11 @@ var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
|
2980
2768
|
Object.defineProperty(SpsPhotoComponent.prototype, ClassBindings, {
|
|
2981
2769
|
get: function () {
|
|
2982
2770
|
return [
|
|
2983
|
-
CPT_NAME,
|
|
2771
|
+
CPT_NAME$2,
|
|
2984
2772
|
this.fitWidth
|
|
2985
|
-
? CPT_NAME + "--fit-width"
|
|
2986
|
-
: CPT_NAME + "--fit-height",
|
|
2987
|
-
this.placeholderIcon && CPT_NAME + "--placeholder",
|
|
2773
|
+
? CPT_NAME$2 + "--fit-width"
|
|
2774
|
+
: CPT_NAME$2 + "--fit-height",
|
|
2775
|
+
this.placeholderIcon && CPT_NAME$2 + "--placeholder",
|
|
2988
2776
|
];
|
|
2989
2777
|
},
|
|
2990
2778
|
enumerable: false,
|
|
@@ -3035,7 +2823,7 @@ var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
|
3035
2823
|
}
|
|
3036
2824
|
return h("i", { className: "sps-icon sps-icon-" + this.placeholderIcon });
|
|
3037
2825
|
};
|
|
3038
|
-
SpsPhotoComponent.displayName = CPT_NAME;
|
|
2826
|
+
SpsPhotoComponent.displayName = CPT_NAME$2;
|
|
3039
2827
|
SpsPhotoComponent.props = {
|
|
3040
2828
|
src: 'string',
|
|
3041
2829
|
altText: 'string',
|
|
@@ -3072,7 +2860,7 @@ var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
|
3072
2860
|
__metadata("design:type", Object)
|
|
3073
2861
|
], SpsPhotoComponent.prototype, "fitWidth", void 0);
|
|
3074
2862
|
SpsPhotoComponent = __decorate([
|
|
3075
|
-
Component({ tag: CPT_NAME })
|
|
2863
|
+
Component({ tag: CPT_NAME$2 })
|
|
3076
2864
|
], SpsPhotoComponent);
|
|
3077
2865
|
return SpsPhotoComponent;
|
|
3078
2866
|
}(HTMLElement));
|
|
@@ -3080,34 +2868,34 @@ var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
|
3080
2868
|
var SpsPhotoExamples = {
|
|
3081
2869
|
sizing: {
|
|
3082
2870
|
label: 'Sizing',
|
|
3083
|
-
description: utils.code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <p>\n Photos are block elements, so a photo fills its container's width unless\n an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n photos have been placed in cards which have different widths in the 12\n column grid.\n </p>\n "], ["\n <p>\n Photos are block elements, so a photo fills its container's width unless\n an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n photos have been placed in cards which have different widths in the 12\n column grid.\n </p>\n "]))),
|
|
2871
|
+
description: utils.code(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n <p>\n Photos are block elements, so a photo fills its container's width unless\n an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n photos have been placed in cards which have different widths in the 12\n column grid.\n </p>\n "], ["\n <p>\n Photos are block elements, so a photo fills its container's width unless\n an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n photos have been placed in cards which have different widths in the 12\n column grid.\n </p>\n "]))),
|
|
3084
2872
|
examples: {
|
|
3085
2873
|
basic: {
|
|
3086
|
-
jsx: utils.code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-2\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-4\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-6\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-2\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-4\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-6\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n </div>\n "]))),
|
|
2874
|
+
jsx: utils.code(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-2\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-4\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-6\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-2\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-4\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-6\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n </div>\n "]))),
|
|
3087
2875
|
},
|
|
3088
2876
|
},
|
|
3089
2877
|
},
|
|
3090
2878
|
displayMode: {
|
|
3091
2879
|
label: 'Fill vs. Fit',
|
|
3092
|
-
description: utils.code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n <p>\n There are two display modes available:\n <ul>\n <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n </ul>\n </p>\n "], ["\n <p>\n There are two display modes available:\n <ul>\n <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n </ul>\n </p>\n "]))),
|
|
2880
|
+
description: utils.code(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n <p>\n There are two display modes available:\n <ul>\n <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n </ul>\n </p>\n "], ["\n <p>\n There are two display modes available:\n <ul>\n <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n </ul>\n </p>\n "]))),
|
|
3093
2881
|
examples: {
|
|
3094
2882
|
landscape: {
|
|
3095
2883
|
description: '<p>Landscape oriented photo (container outline added for illustrative purposes)</p>',
|
|
3096
|
-
jsx: utils.code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
2884
|
+
jsx: utils.code(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
3097
2885
|
},
|
|
3098
2886
|
portrait: {
|
|
3099
2887
|
description: '<p>Portrait oriented photo (container outline added for illustrative purposes)</p>',
|
|
3100
|
-
jsx: utils.code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
2888
|
+
jsx: utils.code(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
3101
2889
|
},
|
|
3102
2890
|
},
|
|
3103
2891
|
},
|
|
3104
2892
|
placeholder: {
|
|
3105
2893
|
label: 'Placeholders',
|
|
3106
|
-
description: utils.code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n <p>\n When an image is not provided for a particular use case (such as a user avatar,\n a company photo, item image, etc.), a placeholder should be shown in its place.\n\n The placeholder's icon, selected from our SPS icon set, should represent the\n type of image it is substituting for.\n </p>\n "], ["\n <p>\n When an image is not provided for a particular use case (such as a user avatar,\n a company photo, item image, etc.), a placeholder should be shown in its place.\n\n The placeholder's icon, selected from our SPS icon set, should represent the\n type of image it is substituting for.\n </p>\n "]))),
|
|
2894
|
+
description: utils.code(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n <p>\n When an image is not provided for a particular use case (such as a user avatar,\n a company photo, item image, etc.), a placeholder should be shown in its place.\n\n The placeholder's icon, selected from our SPS icon set, should represent the\n type of image it is substituting for.\n </p>\n "], ["\n <p>\n When an image is not provided for a particular use case (such as a user avatar,\n a company photo, item image, etc.), a placeholder should be shown in its place.\n\n The placeholder's icon, selected from our SPS icon set, should represent the\n type of image it is substituting for.\n </p>\n "]))),
|
|
3107
2895
|
examples: {
|
|
3108
2896
|
general: {
|
|
3109
2897
|
description: '<p>General Photo</p>',
|
|
3110
|
-
jsx: utils.code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <sps-photo placeholderIcon=\"photo\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <sps-photo placeholderIcon=\"photo\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
2898
|
+
jsx: utils.code(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <sps-photo placeholderIcon=\"photo\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <sps-photo placeholderIcon=\"photo\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
3111
2899
|
},
|
|
3112
2900
|
photoAlt: {
|
|
3113
2901
|
description: '<p>Photo Alt</p>',
|
|
@@ -3128,17 +2916,17 @@ var SpsPhotoExamples = {
|
|
|
3128
2916
|
},
|
|
3129
2917
|
},
|
|
3130
2918
|
};
|
|
3131
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
2919
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
3132
2920
|
|
|
3133
2921
|
var MANIFEST = {
|
|
3134
2922
|
'File Upload': {
|
|
3135
2923
|
components: [SpsFileUploadComponent],
|
|
3136
2924
|
examples: SpsFileUploadExamples,
|
|
3137
2925
|
},
|
|
3138
|
-
'Insight Cards': {
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
},
|
|
2926
|
+
// 'Insight Cards': {
|
|
2927
|
+
// components: [SpsInsightCardComponent, SpsInsightsComponent],
|
|
2928
|
+
// examples: SpsInsightCardExamples,
|
|
2929
|
+
// },
|
|
3142
2930
|
'Tabbed Navigation': {
|
|
3143
2931
|
components: [SpsNavTabComponent, SpsNavTabSetComponent],
|
|
3144
2932
|
examples: SpsNavTabsExamples,
|
|
@@ -3149,6 +2937,218 @@ var MANIFEST = {
|
|
|
3149
2937
|
},
|
|
3150
2938
|
};
|
|
3151
2939
|
|
|
2940
|
+
var CPT_NAME$1 = 'sps-insight-card';
|
|
2941
|
+
var SpsInsightCardComponent = /** @class */ (function (_super) {
|
|
2942
|
+
__extends(SpsInsightCardComponent, _super);
|
|
2943
|
+
function SpsInsightCardComponent() {
|
|
2944
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
2945
|
+
/** Specifies which of the visual styling variants of the Insight Card to use. */
|
|
2946
|
+
_this.kind = dsShared.SpsInsightCardKind.GENERAL;
|
|
2947
|
+
return _this;
|
|
2948
|
+
}
|
|
2949
|
+
Object.defineProperty(SpsInsightCardComponent.prototype, ClassBindings, {
|
|
2950
|
+
get: function () {
|
|
2951
|
+
return [
|
|
2952
|
+
CPT_NAME$1,
|
|
2953
|
+
CPT_NAME$1 + "--" + this.kind,
|
|
2954
|
+
this.detail && this.detail.children.length ? CPT_NAME$1 + "--has-detail" : null,
|
|
2955
|
+
];
|
|
2956
|
+
},
|
|
2957
|
+
enumerable: false,
|
|
2958
|
+
configurable: true
|
|
2959
|
+
});
|
|
2960
|
+
SpsInsightCardComponent.prototype.render = function (_a) {
|
|
2961
|
+
var t = _a.t;
|
|
2962
|
+
var metric = h("div", { className: CPT_NAME$1 + "__metric-count" }, this.metric);
|
|
2963
|
+
var description = (h("div", { className: CPT_NAME$1 + "__description" },
|
|
2964
|
+
h("div", { className: CPT_NAME$1 + "__title",
|
|
2965
|
+
// Both Chrome & FF ignore -webkit-box-orient in the actual CSS for some reason
|
|
2966
|
+
// Also the TS types don't think -webkit-box-orient is a real CSS property
|
|
2967
|
+
style: { '-webkit-box-orient': 'vertical' } }, this.title),
|
|
2968
|
+
h("div", { className: CPT_NAME$1 + "__detail" }, this.content)));
|
|
2969
|
+
var _b = __read((this.partnerCount
|
|
2970
|
+
? t('design-system:insightCard.partnerCount', { count: this.partnerCount, total: this.totalPartners })
|
|
2971
|
+
: '').split('|'), 3), count = _b[0], ofText = _b[1], total = _b[2];
|
|
2972
|
+
return (h("div", { "data-fragment": true },
|
|
2973
|
+
h("div", { className: CPT_NAME$1 + "__body" },
|
|
2974
|
+
this.icon ? h("i", { className: "sps-icon sps-icon-" + this.icon }) : h("i", { className: "sps-icon sps-icon-" + dsShared.SpsInsightCardIcons[this.kind] }),
|
|
2975
|
+
metric,
|
|
2976
|
+
description),
|
|
2977
|
+
this.partnerCount && (h("div", { className: CPT_NAME$1 + "__partner-count" },
|
|
2978
|
+
this.partnerCount === this.totalPartners
|
|
2979
|
+
? h("div", null, t('design-system:insightCard.all'))
|
|
2980
|
+
: (h("div", { "data-fragment": true },
|
|
2981
|
+
h("div", null, count),
|
|
2982
|
+
h("div", null, ofText),
|
|
2983
|
+
h("div", null, total))),
|
|
2984
|
+
h("div", { className: CPT_NAME$1 + "__partners-text" }, t('design-system:insightCard.partners'))))));
|
|
2985
|
+
};
|
|
2986
|
+
SpsInsightCardComponent.displayName = CPT_NAME$1;
|
|
2987
|
+
SpsInsightCardComponent.props = {
|
|
2988
|
+
icon: 'SpsIcon',
|
|
2989
|
+
kind: 'SpsInsightCardKind',
|
|
2990
|
+
title: 'string',
|
|
2991
|
+
metric: 'number',
|
|
2992
|
+
partnerCount: 'number',
|
|
2993
|
+
totalPartners: 'number',
|
|
2994
|
+
secondary: 'boolean',
|
|
2995
|
+
};
|
|
2996
|
+
__decorate([
|
|
2997
|
+
Prop(),
|
|
2998
|
+
__metadata("design:type", String)
|
|
2999
|
+
], SpsInsightCardComponent.prototype, "icon", void 0);
|
|
3000
|
+
__decorate([
|
|
3001
|
+
Prop(),
|
|
3002
|
+
__metadata("design:type", Object)
|
|
3003
|
+
], SpsInsightCardComponent.prototype, "kind", void 0);
|
|
3004
|
+
__decorate([
|
|
3005
|
+
Prop(),
|
|
3006
|
+
__metadata("design:type", String)
|
|
3007
|
+
], SpsInsightCardComponent.prototype, "title", void 0);
|
|
3008
|
+
__decorate([
|
|
3009
|
+
Prop(),
|
|
3010
|
+
__metadata("design:type", Number)
|
|
3011
|
+
], SpsInsightCardComponent.prototype, "metric", void 0);
|
|
3012
|
+
__decorate([
|
|
3013
|
+
Prop(),
|
|
3014
|
+
__metadata("design:type", Number)
|
|
3015
|
+
], SpsInsightCardComponent.prototype, "partnerCount", void 0);
|
|
3016
|
+
__decorate([
|
|
3017
|
+
Prop(),
|
|
3018
|
+
__metadata("design:type", Number)
|
|
3019
|
+
], SpsInsightCardComponent.prototype, "totalPartners", void 0);
|
|
3020
|
+
__decorate([
|
|
3021
|
+
Prop(),
|
|
3022
|
+
__metadata("design:type", Boolean)
|
|
3023
|
+
], SpsInsightCardComponent.prototype, "secondary", void 0);
|
|
3024
|
+
__decorate([
|
|
3025
|
+
Content(),
|
|
3026
|
+
__metadata("design:type", Object)
|
|
3027
|
+
], SpsInsightCardComponent.prototype, "content", void 0);
|
|
3028
|
+
__decorate([
|
|
3029
|
+
QuerySelector("." + CPT_NAME$1 + "__detail"),
|
|
3030
|
+
__metadata("design:type", Object)
|
|
3031
|
+
], SpsInsightCardComponent.prototype, "detail", void 0);
|
|
3032
|
+
SpsInsightCardComponent = __decorate([
|
|
3033
|
+
Component({ tag: CPT_NAME$1 })
|
|
3034
|
+
], SpsInsightCardComponent);
|
|
3035
|
+
return SpsInsightCardComponent;
|
|
3036
|
+
}(HTMLElement));
|
|
3037
|
+
|
|
3038
|
+
var CPT_NAME = 'sps-insights';
|
|
3039
|
+
/** Container for Insight Cards. */
|
|
3040
|
+
var SpsInsightsComponent = /** @class */ (function (_super) {
|
|
3041
|
+
__extends(SpsInsightsComponent, _super);
|
|
3042
|
+
function SpsInsightsComponent() {
|
|
3043
|
+
var _this = _super.call(this) || this;
|
|
3044
|
+
_this.content = [];
|
|
3045
|
+
_this.showAdditionalInsights = false;
|
|
3046
|
+
_this.toggleAdditionalInsights = _this.toggleAdditionalInsights.bind(_this);
|
|
3047
|
+
return _this;
|
|
3048
|
+
}
|
|
3049
|
+
Object.defineProperty(SpsInsightsComponent.prototype, ClassBindings, {
|
|
3050
|
+
get: function () {
|
|
3051
|
+
return [
|
|
3052
|
+
CPT_NAME,
|
|
3053
|
+
this.showAdditionalInsights && CPT_NAME + "--show-additional",
|
|
3054
|
+
this.details && Array.from(this.details).every(function (d) { return !d.textContent; })
|
|
3055
|
+
? CPT_NAME + "--no-details"
|
|
3056
|
+
: null,
|
|
3057
|
+
this.content.length === 6 ? CPT_NAME + "--break-4" : null,
|
|
3058
|
+
this.content.length === 7 ? CPT_NAME + "--break-5" : null,
|
|
3059
|
+
this.content.length === 8 ? CPT_NAME + "--break-5" : null,
|
|
3060
|
+
];
|
|
3061
|
+
},
|
|
3062
|
+
enumerable: false,
|
|
3063
|
+
configurable: true
|
|
3064
|
+
});
|
|
3065
|
+
/** Only the first ten Insight Cards are visible by default; the rest are behind
|
|
3066
|
+
* the "Show Additional Insights"/"Hide Additional Insights" button. This method
|
|
3067
|
+
* will toggle the additional insights.
|
|
3068
|
+
*/
|
|
3069
|
+
SpsInsightsComponent.prototype.toggleAdditionalInsights = function () {
|
|
3070
|
+
this.showAdditionalInsights = !this.showAdditionalInsights;
|
|
3071
|
+
this.update();
|
|
3072
|
+
};
|
|
3073
|
+
SpsInsightsComponent.prototype.render = function () {
|
|
3074
|
+
return (h("div", { "data-fragment": true },
|
|
3075
|
+
this.content,
|
|
3076
|
+
this.content.length > 10
|
|
3077
|
+
&& (h("div", { className: "sps-button sps-button--link", onClick: this.toggleAdditionalInsights },
|
|
3078
|
+
h("button", { type: "button" },
|
|
3079
|
+
this.showAdditionalInsights ? 'Hide ' : 'Show ',
|
|
3080
|
+
"Additional Insights")))));
|
|
3081
|
+
};
|
|
3082
|
+
SpsInsightsComponent.displayName = CPT_NAME;
|
|
3083
|
+
SpsInsightsComponent.props = {};
|
|
3084
|
+
__decorate([
|
|
3085
|
+
Content(),
|
|
3086
|
+
__metadata("design:type", Object)
|
|
3087
|
+
], SpsInsightsComponent.prototype, "content", void 0);
|
|
3088
|
+
__decorate([
|
|
3089
|
+
QuerySelectorAll('.sps-insight-card__detail'),
|
|
3090
|
+
__metadata("design:type", NodeList)
|
|
3091
|
+
], SpsInsightsComponent.prototype, "details", void 0);
|
|
3092
|
+
SpsInsightsComponent = __decorate([
|
|
3093
|
+
Component({ tag: CPT_NAME }),
|
|
3094
|
+
__metadata("design:paramtypes", [])
|
|
3095
|
+
], SpsInsightsComponent);
|
|
3096
|
+
return SpsInsightsComponent;
|
|
3097
|
+
}(HTMLElement));
|
|
3098
|
+
|
|
3099
|
+
var SpsInsightCardExamples = {
|
|
3100
|
+
basic: {
|
|
3101
|
+
label: 'Basic Insight Cards',
|
|
3102
|
+
examples: {
|
|
3103
|
+
basic: {
|
|
3104
|
+
jsx: utils.code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n "]))),
|
|
3105
|
+
},
|
|
3106
|
+
},
|
|
3107
|
+
},
|
|
3108
|
+
details: {
|
|
3109
|
+
label: 'With Details',
|
|
3110
|
+
examples: {
|
|
3111
|
+
details: {
|
|
3112
|
+
jsx: utils.code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "]))),
|
|
3113
|
+
},
|
|
3114
|
+
},
|
|
3115
|
+
},
|
|
3116
|
+
partner_count: {
|
|
3117
|
+
label: 'Partner Count',
|
|
3118
|
+
examples: {
|
|
3119
|
+
partner_count: {
|
|
3120
|
+
jsx: utils.code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n ></sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n ></sps-insight-card>\n </sps-insights>\n "]))),
|
|
3121
|
+
},
|
|
3122
|
+
},
|
|
3123
|
+
},
|
|
3124
|
+
expansion: {
|
|
3125
|
+
label: '10+ Insight Cards',
|
|
3126
|
+
examples: {
|
|
3127
|
+
expansion: {
|
|
3128
|
+
jsx: utils.code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "]))),
|
|
3129
|
+
},
|
|
3130
|
+
},
|
|
3131
|
+
},
|
|
3132
|
+
events: {
|
|
3133
|
+
label: 'Adding a click handler',
|
|
3134
|
+
description: utils.code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n Here is how to do it:</p>\n "], ["\n <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n Here is how to do it:</p>\n "]))),
|
|
3135
|
+
examples: {
|
|
3136
|
+
events: {
|
|
3137
|
+
react: utils.code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n function Component() {\n function handleClick() {\n window.alert(\"Insight card clicked\");\n }\n\n const ref = React.useRef();\n React.useEffect(() => {\n ref.current.addEventListener(\"click\", handleClick);\n return () => {\n ref.current.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n return (\n <sps-insights>\n <sps-insight-card ref={ref}\n kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n );\n }\n "], ["\n function Component() {\n function handleClick() {\n window.alert(\"Insight card clicked\");\n }\n\n const ref = React.useRef();\n React.useEffect(() => {\n ref.current.addEventListener(\"click\", handleClick);\n return () => {\n ref.current.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n return (\n <sps-insights>\n <sps-insight-card ref={ref}\n kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n );\n }\n "]))),
|
|
3138
|
+
},
|
|
3139
|
+
},
|
|
3140
|
+
},
|
|
3141
|
+
alternateIcon: {
|
|
3142
|
+
label: 'Using alternate icons',
|
|
3143
|
+
examples: {
|
|
3144
|
+
basic: {
|
|
3145
|
+
react: utils.code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n function DemoComponent() {\n return (\n <sps-insights>\n <sps-insight-card\n kind=\"general\"\n metric=\"1234\"\n icon={SpsIcon.DOLLAR_SIGN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"processing\"\n metric=\"1234\"\n icon={SpsIcon.ASTERISK}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"success\"\n metric=\"1234\"\n icon={SpsIcon.USER}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"warning\"\n metric=\"1234\"\n icon={SpsIcon.FOLDER_OPEN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"error\"\n metric=\"1234\"\n icon={SpsIcon.BAN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n )\n }\n "], ["\n function DemoComponent() {\n return (\n <sps-insights>\n <sps-insight-card\n kind=\"general\"\n metric=\"1234\"\n icon={SpsIcon.DOLLAR_SIGN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"processing\"\n metric=\"1234\"\n icon={SpsIcon.ASTERISK}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"success\"\n metric=\"1234\"\n icon={SpsIcon.USER}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"warning\"\n metric=\"1234\"\n icon={SpsIcon.FOLDER_OPEN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"error\"\n metric=\"1234\"\n icon={SpsIcon.BAN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n )\n }\n "]))),
|
|
3146
|
+
},
|
|
3147
|
+
},
|
|
3148
|
+
},
|
|
3149
|
+
};
|
|
3150
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
3151
|
+
|
|
3152
3152
|
exports.AttrBindings = AttrBindings;
|
|
3153
3153
|
exports.ClassBindings = ClassBindings;
|
|
3154
3154
|
exports.Component = Component;
|