ngx-sfc-components 0.0.16 → 0.0.17
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/esm2020/lib/components/avatar/avatar.component.mjs +2 -2
- package/esm2020/lib/components/carousel/carousel.component.mjs +2 -2
- package/esm2020/lib/components/menu/dropdown/dropdown-menu.component.mjs +28 -3
- package/esm2020/lib/components/menu/dropdown/parts/item/dropdown-menu-item.component.mjs +2 -2
- package/esm2020/lib/components/menu/navigation/navigation-menu.component.mjs +2 -2
- package/esm2020/lib/components/menu/navigation/parts/item/navigation-menu-item.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/parts/header/side-menu-header.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/parts/item/content/side-menu-item-content.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/parts/title/side-menu-title.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/side-menu.component.mjs +2 -2
- package/esm2020/lib/components/progress/line/progress-line.component.mjs +2 -2
- package/esm2020/lib/components/progress/semi-circle/progress-semi-circle.component.mjs +2 -2
- package/esm2020/lib/components/table/parts/columns/selectable/selectable-table-column.component.mjs +2 -2
- package/esm2020/lib/components/table/parts/toggle/columns-toggle.component.mjs +2 -2
- package/esm2020/lib/components/tabs/parts/labels/tab-label-icon/tab-label-icon.component.mjs +2 -2
- package/esm2020/lib/components/tabs/parts/labels/tab-label-line/tab-label-line.component.mjs +2 -2
- package/esm2020/lib/components/tabs/tabs.component.mjs +2 -2
- package/esm2020/lib/components/timeline/parts/item/timeline-item.component.mjs +2 -2
- package/fesm2015/ngx-sfc-components.mjs +60 -37
- package/fesm2015/ngx-sfc-components.mjs.map +1 -1
- package/fesm2020/ngx-sfc-components.mjs +60 -37
- package/fesm2020/ngx-sfc-components.mjs.map +1 -1
- package/package.json +2 -2
package/esm2020/lib/components/tabs/parts/labels/tab-label-line/tab-label-line.component.mjs
CHANGED
|
@@ -6,9 +6,9 @@ import * as i2 from "@fortawesome/angular-fontawesome";
|
|
|
6
6
|
export class TabLabelLineComponent extends TabLabelContentBase {
|
|
7
7
|
}
|
|
8
8
|
TabLabelLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
-
TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineComponent, selector: "sfc-tab-label-line", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span>{{label}}</span>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme)
|
|
9
|
+
TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineComponent, selector: "sfc-tab-label-line", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span>{{label}}</span>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.disabled{cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host .container{width:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0}:host .container .content fa-icon{margin-right:.18em}@media (max-width: 430px){:host .container .content fa-icon{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
10
10
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineComponent, decorators: [{
|
|
11
11
|
type: Component,
|
|
12
|
-
args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span>{{label}}</span>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme)
|
|
12
|
+
args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span>{{label}}</span>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.disabled{cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host .container{width:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0}:host .container .content fa-icon{margin-right:.18em}@media (max-width: 430px){:host .container .content fa-icon{display:none}}\n"] }]
|
|
13
13
|
}] });
|
|
14
14
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWxhYmVsLWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy90YWJzL3BhcnRzL2xhYmVscy90YWItbGFiZWwtbGluZS90YWItbGFiZWwtbGluZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RhYnMvcGFydHMvbGFiZWxzL3RhYi1sYWJlbC1saW5lL3RhYi1sYWJlbC1saW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0scUNBQXFDLENBQUM7Ozs7QUFPMUUsTUFBTSxPQUFPLHFCQUFzQixTQUFRLG1CQUFtQjs7a0hBQWpELHFCQUFxQjtzR0FBckIscUJBQXFCLGlGQ1JsQyxzS0FLTTsyRkRHTyxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0Usb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFRhYkxhYmVsQ29udGVudEJhc2UgfSBmcm9tICcuLi90YWItbGFiZWwtY29udGVudC1iYXNlLmNvbXBvbmVudCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy10YWItbGFiZWwtbGluZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYi1sYWJlbC1saW5lLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi90YWItbGFiZWwtbGluZS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUYWJMYWJlbExpbmVDb21wb25lbnQgZXh0ZW5kcyBUYWJMYWJlbENvbnRlbnRCYXNlIHtcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XHJcbiAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cclxuICAgIDxmYS1pY29uICpuZ0lmPVwiaWNvblwiIFtpY29uXT1cImljb25cIj48L2ZhLWljb24+XHJcbiAgICA8c3Bhbj57e2xhYmVsfX08L3NwYW4+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -50,10 +50,10 @@ export class TabsComponent {
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, deps: [{ token: i1.TabService }], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
-
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div class=\"tabs-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n (click)=\"selectTab(tab, index)\">\r\n\r\n <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"body-container\">\r\n <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n </sfc-template-content>\r\n\r\n </ng-container>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme)
|
|
53
|
+
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div class=\"tabs-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n (click)=\"selectTab(tab, index)\">\r\n\r\n <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"body-container\">\r\n <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n </sfc-template-content>\r\n\r\n </ng-container>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#fff}:host .container .body-container{margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
|
|
54
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
55
55
|
type: Component,
|
|
56
|
-
args: [{ selector: 'sfc-tabs', providers: [TabService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div class=\"tabs-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n (click)=\"selectTab(tab, index)\">\r\n\r\n <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"body-container\">\r\n <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n </sfc-template-content>\r\n\r\n </ng-container>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme)
|
|
56
|
+
args: [{ selector: 'sfc-tabs', providers: [TabService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div class=\"tabs-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n (click)=\"selectTab(tab, index)\">\r\n\r\n <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"body-container\">\r\n <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n </sfc-template-content>\r\n\r\n </ng-container>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#fff}:host .container .body-container{margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"] }]
|
|
57
57
|
}], ctorParameters: function () { return [{ type: i1.TabService }]; }, propDecorators: { tabs: [{
|
|
58
58
|
type: Input
|
|
59
59
|
}], label: [{
|
|
@@ -15,10 +15,10 @@ export class TimelineItemComponent {
|
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
TimelineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
TimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: { model: "model" }, host: { properties: { "class": "this.position", "class.period": "this.period" } }, ngImport: i0, template: "<li class=\"container\">\r\n <div class=\"date-time\">\r\n <span>{{model.dateTimeLabel}}</span>\r\n </div>\r\n <div class=\"marker\">\r\n <div class=\"delimeter\"></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"title\">\r\n <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n <span>{{model.title}}</span>\r\n </div> \r\n <p>{{model.description}}</p>\r\n </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host .container .date-time,:host-context(.sfc-default-theme)
|
|
18
|
+
TimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: { model: "model" }, host: { properties: { "class": "this.position", "class.period": "this.period" } }, ngImport: i0, template: "<li class=\"container\">\r\n <div class=\"date-time\">\r\n <span>{{model.dateTimeLabel}}</span>\r\n </div>\r\n <div class=\"marker\">\r\n <div class=\"delimeter\"></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"title\">\r\n <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n <span>{{model.title}}</span>\r\n </div> \r\n <p>{{model.description}}</p>\r\n </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host .container .date-time,:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#fff}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;box-sizing:border-box}:host .container .marker:after,:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#fff}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid}:host .container .marker .delimeter,:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#fff}:host .container .content{font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content sfc-icon{margin-right:.31em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:none}:host.period .container .marker:before,:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#fff}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content .title{width:100%}:host.period .container .content .title span{margin:0;font-size:1.875em;text-align:center}:host:not(.period):hover .container .marker:before{border:.18em solid #2bbbad}:host:not(.period):hover .container .marker:before,:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 435px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
19
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineItemComponent, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
|
-
args: [{ selector: 'sfc-timeline-item', template: "<li class=\"container\">\r\n <div class=\"date-time\">\r\n <span>{{model.dateTimeLabel}}</span>\r\n </div>\r\n <div class=\"marker\">\r\n <div class=\"delimeter\"></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"title\">\r\n <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n <span>{{model.title}}</span>\r\n </div> \r\n <p>{{model.description}}</p>\r\n </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host .container .date-time,:host-context(.sfc-default-theme)
|
|
21
|
+
args: [{ selector: 'sfc-timeline-item', template: "<li class=\"container\">\r\n <div class=\"date-time\">\r\n <span>{{model.dateTimeLabel}}</span>\r\n </div>\r\n <div class=\"marker\">\r\n <div class=\"delimeter\"></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"title\">\r\n <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n <span>{{model.title}}</span>\r\n </div> \r\n <p>{{model.description}}</p>\r\n </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host .container .date-time,:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#fff}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;box-sizing:border-box}:host .container .marker:after,:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#fff}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid}:host .container .marker .delimeter,:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#fff}:host .container .content{font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content sfc-icon{margin-right:.31em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:none}:host.period .container .marker:before,:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#fff}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content .title{width:100%}:host.period .container .content .title span{margin:0;font-size:1.875em;text-align:center}:host:not(.period):hover .container .marker:before{border:.18em solid #2bbbad}:host:not(.period):hover .container .marker:before,:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 435px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"] }]
|
|
22
22
|
}], propDecorators: { model: [{
|
|
23
23
|
type: Input
|
|
24
24
|
}], position: [{
|