diff options
Diffstat (limited to 'stories/ng2-component-lab/tooltip.directive.exp.ts')
| -rw-r--r-- | stories/ng2-component-lab/tooltip.directive.exp.ts | 231 |
1 files changed, 0 insertions, 231 deletions
diff --git a/stories/ng2-component-lab/tooltip.directive.exp.ts b/stories/ng2-component-lab/tooltip.directive.exp.ts deleted file mode 100644 index 9e1dd0b..0000000 --- a/stories/ng2-component-lab/tooltip.directive.exp.ts +++ /dev/null @@ -1,231 +0,0 @@ -import { experimentOn } from '@islavi/ng2-component-lab'; -import { ArrowPlacement, TooltipPlacement } from '../../src/angular/tooltip/tooltip.directive'; - -const customTemplate = ` - .sdc-custom-tooltip-template-title { - font-size: 20px; - font-weight: bold; - background-color: $black; - color: $white; - text-align: center; - } - - .sdc-custom-tooltip-template-content { - background-color: $black; - color: $white; - display: inline-block; - text-align: center; - } - - .sdc-custom-tooltip-template-image { - width: 100%; - height:100%; - display: inline-block; - text-align: center; - background-color: #ffffff; - } -`; - -export default experimentOn('Tooltip') - .group("Tooltip",[ - { - id: 'leftAlignmentTextTooltip', - showSource: true, - title: 'Tooltip with short text (left placement)', - description: 'left placement', - context: { - placement: TooltipPlacement.Left, - arrowPlacement: ArrowPlacement.LeftTop - }, - template: ` - <div style="padding-bottom: 20px; width: 350px;">Lorem ipsum dolor sit amet, - <span style="color: #009fdb" - sdc-tooltip - tooltip-text = 'A short text name, short text' - [tooltip-placement]= 'placement' - [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip - </span> - ,consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. - Integer pulvinar pellentesque accumsan. - <span style="color: #009fdb" - sdc-tooltip - tooltip-text = 'A short text name, short text' - [tooltip-placement]= 'placement' - [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip - </span> - Sed hendrerit lacus eu tempus pharetra - </div> - ` - }, - { - id: 'leftAlignmentMultiLineTextTooltip', - showSource: true, - title: 'Tooltip with multi line text (left placement)', - description: 'left placement', - context: { - placement: TooltipPlacement.Left, - arrowPlacement: ArrowPlacement.LeftTop - }, - template: ` - <div style="padding-bottom: 20px;"> - The is text example, - <span style="color: #009fdb" - sdc-tooltip - tooltip-text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra' - [tooltip-placement]= 'placement' - [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip - </span> - , more text - </div> - ` - }, - { - id: 'customStyleTooltip', - showSource: true, - title: 'Tooltip with custom style', - description: 'Tooltip with custom style, define your class and style it via css.', - context: { - text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra' - }, - template: ` - <![CDATA[ - .sdc-custom-tooltip { - background-color: $dark-blue; - border-color: $dark-blue; - border-radius: 10px; - } - ]]> - <div style="padding-bottom: 20px;"> - Some text example, - <span style="color: #009fdb" sdc-tooltip [tooltip-text]=text tooltip-css-class='sdc-custom-tooltip'>show tooltip</span>, more text - </div> - ` - }, - { - id: 'rightAlignmentHtmlTooltip', - showSource: true, - title: 'Tooltip with HTML template (right placement)', - description: 'right placement', - context: { - placement: TooltipPlacement.Right, - arrowPlacement: ArrowPlacement.LeftTop - }, - styles: [customTemplate], - template: ` - Template Input: - <pre><![CDATA[ - <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> - <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p> - ]]></pre> - - <div style="padding-bottom: 20px;"> - The is text example, - <span style="color: #009fdb" - sdc-tooltip - tooltip-text = 'This is the tooltip test' - [tooltip-placement]= 'placement' - [tooltip-arrow-placement] = 'arrowPlacement' - [tooltip-template]='template'>show tooltip - </span> - , more text - </div> - - <template #template> - <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> - <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p> - </template> - ` - }, - { - id: 'rightAlignmentHtmlCustomStyleTooltip', - showSource: true, - title: 'Tooltip with HTML template and custom style (right placement)', - description: 'right placement', - context: { - placement: TooltipPlacement.Right, - arrowPlacement: ArrowPlacement.LeftTop - }, - styles: [customTemplate], - template: ` - Template Input: - <pre><![CDATA[ - <p class="sdc-custom-tooltip-template-title sdc-tooltip-template-big-title">Title... Title... Title... Title... Title...</p> - <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> - <p class="sdc-custom-tooltip-template-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</p> - ]]></pre> - - <div style="padding-bottom: 20px;"> - The is text example, - <span style="color: #009fdb" - sdc-tooltip - tooltip-text = 'This is the tooltip test' - [tooltip-placement]= 'placement' - tooltip-css-class = 'sdc-custom-tooltip' - [tooltip-arrow-placement] = 'arrowPlacement' - [tooltip-template]='template'>show tooltip - </span> - , more text - </div> - - <template #template> - <p class="sdc-custom-tooltip-template-title sdc-tooltip-template-big-title">Title... Title... Title... Title... Title...</p> - <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> - <p class="sdc-custom-tooltip-template-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</p> - </template> - ` - }, - { - id: 'topAlignmentTextTooltip', - showSource: true, - title: 'Tooltip with text (top placement)', - description: 'top placement', - context: { - placement: TooltipPlacement.Top, - arrowPlacement: ArrowPlacement.LeftTop - }, - template: ` - <div style="padding-bottom: 20px;"> - The is text example, - <span style="color: #009fdb" - sdc-tooltip - tooltip-text = 'A long text name, very long, long text' - [tooltip-placement]= 'placement' - [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip - </span> - , more text - </div> - ` - }, - { - id: 'bottomAlignmentHtmlTooltip', - showSource: true, - title: 'Tooltip with HTML template (bottom placement)', - description: 'bottom placement', - context: { - placement: TooltipPlacement.Bottom, - arrowPlacement: ArrowPlacement.LeftTop - }, - template: ` - Template Input: - <pre><![CDATA[ - <div class="sdc-tooltip-template-content">A long text name,</div> - <div class="sdc-tooltip-template-content">very long, long text</div> - ]]></pre> - - <div style="width:30%; height: 30px; text-align: center;"> - The is text example, - <a style="color: #009fdb; font-size: small; cursor: pointer;" - sdc-tooltip - tooltip-text = 'This is the tooltip test' - [tooltip-placement]= 'placement' - [tooltip-arrow-placement] = 'arrowPlacement' - [tooltip-template]='template' >link example</a> - , more text - </div> - <template #template> - <div class="sdc-tooltip-template-content">A long text name,</div> - <div class="sdc-tooltip-template-content">very long, long text</div> - </template> - ` - }, - ]); |