File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
expanded
|
Default value : false
|
|
|
import { Component, Input, OnInit } from '@angular/core';
import { ResourceService } from '@sunbird/shared';
import * as _ from 'lodash-es';
@Component({
selector: 'app-content-licence',
templateUrl: './content-licence.component.html',
styleUrls: ['./content-licence.component.scss']
})
export class ContentLicenceComponent implements OnInit {
@Input() content;
instance: string;
attributions: string;
expanded = false;
constructor(public resourceService: ResourceService) { }
ngOnInit() {
this.instance = _.upperCase(this.resourceService.instance);
if (this.content && _.get(this.content, 'attributions')) {
// attributors
const attributions = _.isString(_.get(this.content, 'attributions')) ?
_.get(this.content, 'attributions').split(',') : _.get(this.content, 'attributions');
this.attributions = (_.compact(_.uniq(attributions).sort()).join(', '));
}
}
}
<mat-accordion class="sb-mat-accordion mb-16">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title class="sb-mat-accordion__title">
{{resourceService?.frmelmnts?.lbl?.desktop?.creditsAndLicenceInfo}}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="sb-mat-accordion__content credits-section" role="region" id="creditsAndLicenceInfo" aria-labelledby="creditsAndLicenceInfo">
<h4 *ngIf="content?.author" class="title">{{resourceService?.frmelmnts?.lbl?.author}}</h4>
<p class="description">{{content?.author}}</p>
<h4 *ngIf="content?.createdOn" class="title">{{resourceService?.frmelmnts?.lbl?.createdon}}</h4>
<p class="description">{{content?.createdOn | dateFormat}}</p>
<h4 *ngIf="content?.lastUpdatedOn" class="title">{{resourceService?.frmelmnts?.lbl?.updatedon}}</h4>
<p class="description">{{content?.lastUpdatedOn | dateFormat}}</p>
<h4 *ngIf="attributions" class="title">{{resourceService?.frmelmnts?.lbl?.attributions}}
</h4>
<p class="description">{{attributions}}</p>
<h4 *ngIf="content?.license" class="title">{{resourceService?.frmelmnts?.lbl?.licenseTerms}}</h4>
<p class="description">{{content.license}}</p>
<p *ngIf="content?.licenseDetails?.name" class="description__url">
{{content.licenseDetails['name']}} {{content.licenseDetails['description']}}‎ <br />
<span *ngIf="content.licenseDetails['url']">
<a class="url" href="{{content.licenseDetails['url']}}" target="_blank">{{content.licenseDetails['url']}}</a>
</span>
</p>
<h4 *ngIf="content?.copyright" class="title">{{resourceService?.frmelmnts?.lbl?.copyRight}}</h4>
<p class="description">{{content?.copyright}}<span
*ngIf="content?.copyrightYear">, {{content?.copyrightYear}}</span></p>
<div *ngIf="content.originData">
<p class="sub-section">{{resourceService?.frmelmnts?.lbl?.contentcopiedtitle}} </p>
<div class="sb-meta-data mb-16 " *ngIf="content.originData.name">
<h4 class="title">{{resourceService?.frmelmnts?.lbl?.desktop.content}}</h4>
<p class="description">{{content?.originData?.name}}</p>
</div>
<div class="sb-meta-data mb-16" *ngIf="content.originData.author">
<h4 class="title">{{resourceService?.frmelmnts?.lbl?.desktop.authorOfSourceContent}}</h4>
<p class="description">{{content.originData.author}}</p>
</div>
<div class="sb-meta-data mb-16" *ngIf="content.originData.license">
<h4 class="title">{{resourceService?.frmelmnts?.lbl?.licenseTerms}}</h4>
<p class="description">{{content.originData.license}}</p>
</div>
<div class="sb-meta-data mb-16" *ngIf="content.originData.organisation">
<h4 class="title"
[innerHTML]="resourceService.frmelmnts.lbl?.publishedOnInstanceName | interpolate:'{instance}': instance">
</h4>
<p class="description">{{content.originData.organisation.join(', ')}}</p>
<a *ngIf="content.orgDetails?.email"
href="mailto:{{content.orgDetails?.email}}?subject={{content.name}}">{{content.orgDetails?.email}}</a>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
::ng-deep{
.sb-toc-credits {
.sbaccordion__panel {
box-shadow: none !important;
}
.sb-bg-color-gray-0 {
.sbaccordion__panel-header {
background:var(--gray-0) !important;
height:2.5rem !important;
}
}
.sbaccordion__panel-header__title {
width: auto;
padding-right: calculateRem(16px);
font-weight: normal;
}
.sbaccordion__panel-content{
overflow: inherit;
max-height: 100%;
border-top: 0px;
background-color: transparent !important;
}
}
}
.contentdata-description {
border-bottom: calculateRem(0.5px) solid var(--gray-200);
}
.credits-section {
.title {
color: var(--gray-200);
font-size: calculateRem(10px);
font-weight: bold;
word-wrap: break-word;
}
.description {
color: var(--gray-800);
font-size: calculateRem(14px);
word-wrap: break-word;
}
.description__url {
a.url {
word-break: break-all;
}
}
.sub-section {
color: var(--primary-color);
font-size: calculateRem(14px);
word-wrap: break-word;
}
.title, .description, .sub-section {
line-height: inherit;
}
}
Legend
Html element with directive